`

(转)关于在<td>中显示文本的自动截断

阅读更多


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table
{
 table-layout:fixed;
}
td
{
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden;
}
</style>
</head>

<body>
<table width="100%" border="1" class="xTable">
  <tr>
    <td width="100">col_1</td>
    <td>col_2</td>
    <td width="120">col_3</td>
    <td width="100">col_4</td>
  </tr>
  <tr>
    <td>abcdefg</td>
    <td>a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z</td>
    <td>abcdefg</td>
    <td>abcdefg</td>
  </tr>
</table>
</body>
</html>

 

 未添加截断字符串样式前:

 添加截断字符串样式后:



 (转自:http://0123.blog.163.com/blog/static/478831200910275422865/)

  • 大小: 18.1 KB
  • 大小: 10.5 KB
分享到:
评论

相关推荐

    jquery 截取长文本和css

    方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容 ...&lt;td&gt;以下两种方式都可以解决textarea行高自动适应类容的高度&lt;/td&gt; &lt;td&gt;以下两种方式都可以解决textarea行&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/BODY&gt; &lt;/HTML&gt;

    固定宽度表格布局设定宽度问题

    在网页设计中,固定宽度的表格布局是一种常见的需求,它能确保内容在不同屏幕尺寸下保持一致的显示效果。本文将深入探讨如何设置表格的固定宽度,并解决可能遇到的问题。 首先,我们需要理解HTML中的`&lt;table&gt;`元素...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    在网页设计中,经常需要处理表格(table)的布局问题,特别是当单元格(cell)内的文本内容过长时,如何保持单元格的固定宽度,不让内容换行,并在显示不下的情况下添加省略号("...")表示内容被截断。这涉及到CSS...

    js form表单input框限制20个字符,10个汉字代码实例.docx

    如果超过了限制,则自动截断输入。 3. **字符计数算法**:这里的关键在于如何准确计算字符串的字节数。我们将使用正则表达式来识别全角字符,并根据这些字符的数量来调整计算方式。 #### 四、具体实现代码 接下来...

    layui表格内容溢出的解决方法

    在上述代码中,TD标签中嵌套了一个DIV,并通过CSS样式设置了文本溢出的处理方式。这样即使表格内容超出预设宽度,也能保持界面的整洁和美观。这是解决layui表格内容溢出的一种简单有效的方法。 总之,通过上述设置...

    将td中文字过长的部分变成省略号显示的小技巧

    通过将这三个属性结合起来,当TD中文字长度超出单元格宽度时,文本就会在不换行的情况下被截断,并在末尾显示省略号。这样的显示效果既美观又能向用户直观地表明有内容被隐藏了。 这个技巧非常适合用于需要在固定的...

    css实现不再让内容把td撑开的常用解决方法

    在网页设计中,经常遇到一个问题,那就是表格中的单元格(td)会被其内部的内容自动撑开,导致表格的布局混乱。这种情况通常是由于内容长度超过了单元格的预设宽度,浏览器会默认扩展单元格来适应内容。然而,我们...

    bootstrap表格内容过长时用省略号表示的解决方法

    在原始CSS中,`&lt;td&gt;` 元素的内容会自动扩展到足够宽以容纳所有文本,这可能导致列宽超出预设。为了使内容在达到固定宽度后显示省略号,可以应用以下CSS样式: ```css .table tbody tr td { overflow: hidden; ...

    HTML长文本截取含有HTML代码同样适用的两种方法

    在网页设计中,有时我们需要对HTML长文本进行截断,特别是在有限的空间内显示内容时,如在列表项、摘要或预览中。本篇文章将介绍两种适用于包含HTML代码的长文本截取方法,确保在截断后仍能保持良好的可读性和格式。...

    html td nowrap不换行属性使用方法

    `nowrap`是一个属性,当应用于`&lt;td&gt;`元素时,它会禁止单元格内的文本自动换行,确保所有内容都在同一行内显示,直到遇到表格的边界或下一个单元格。这个属性对于在有限空间内展示长字符串或避免单词在单元格内被截断...

    2021-2022计算机二级等级考试试题及答案No.2501.docx

    11. 查询去向:在数据库查询中,查询结果可以输出到报表、标签或文本文件,但不包括图形。 12. SQL删除记录:使用`DELETE FROM`语句删除满足条件的记录,例如`DELETE FROM S WHERE AGE&gt;30`。 13. 输入设备:输入...

    gridview一般换行,强制换行

    "gridview一般换行,强制换行"这个主题涉及到如何在GridView中处理文本换行,特别是在面临内容溢出或者需要特定格式化时的处理策略。 首先,我们来理解GridView的基本工作原理。GridView自动将数据源中的字段映射到...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    CSS中关于溢出隐藏的知识点包含了多个方面,具体包括overflow属性的使用、其各个值的含义、以及如何优雅地处理内容溢出的情况。 首先,CSS中的overflow属性是用于控制元素溢出内容的显示方式。这个属性可以指定当...

    CSS超出文本指定宽度用省略号代替和文本不换行

    当处理表格单元格(`&lt;td&gt;`)中的文本溢出时,需要使用类似的方法,但考虑到表格的特性,我们需要额外的CSS规则: ```css table { width: 100%; /* 表格宽度 */ table-layout: fixed; /* 确保td的宽度生效 */ }...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    在HTML中,`div`、`td` 和 `p` 等元素作为常见的容器,经常用于组织和展示页面内容。对于这些容器内的文本换行处理,可以通过CSS样式来实现。这里我们将详细讨论如何实现强制不换行以及自动换行,并分析不同换行方式...

    CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现

    在本篇文档中,我们将深入学习如何使用CSS控制文本的显示方式,具体来说是如何实现当文本超出指定宽度时,在文本的末尾显示省略号,并且文本不换行。这种效果在网页设计中非常常见,它能够帮助我们优雅地处理那些...

    table中的超长字符串用省略号表示的css样式

    在数据展示过程中,我们可能会遇到表格单元格(td)中的文本内容过长,导致表格布局被破坏或者显示效果不佳的情况。为了保持表格布局的一致性,同时避免过长的字符串破坏布局,我们通常会使用CSS样式来控制这些超长...

    C#精髓-- GridView 72般绝技

    - 示例代码:在模板字段中插入 `&lt;br /&gt;`。 ```csharp &lt;asp:TemplateField&gt; &lt;ItemTemplate&gt; &lt;%# Eval("Text").ToString().Replace("\n", "&lt;br /&gt;") %&gt; &lt;/ItemTemplate&gt; &lt;/asp:TemplateField&gt; ``` #### 12. ...

Global site tag (gtag.js) - Google Analytics