TD中{text-overflow:ellipsis;} 用法

最新推荐文章于 2022-11-14 20:37:24 发布
最新推荐文章于 2022-11-14 20:37:24 发布
阅读量187 收藏
点赞数
原文链接：http://www.cnblogs.com/njl041x/p/4112662.html
版权

Styles：

table{ table-layout:fixed; } 
table td{ text-overflow:ellipsis;overflow:hidden;white-space: nowrap; }

转载于:https://www.cnblogs.com/njl041x/p/4112662.html

aa781398079
关注
【小技巧】过长文本截取技术 text-overflow:ellipsis
笑的自然技术博客
05-16 1608
这几天做公司内网，首页有很多处理是要截取字符串的，目前以我的水平只会用JSTL表达式中的函数来截取，截取长度为length过多省略的代码如下：${fn:substring(str, 0, length)}... 上述代码的缺点：1、过于死板，字数大于length只显示length长度的字符串，导致如果是字母（字母比数字窄）被截取后显示更短，不美观；2、依赖于JSTL库；3、代码冗余度高
《CSS3实战》笔记--溢出文本省略：text-overflow和文本换行显示：word-wrop
后乐的博客
04-23 6914
《CSS3实战》总结 text-overflow和word-wrop
table td 文本自动截断 text-overflow:ellipsis
sqh001的专栏
10-11 1万+
.table-set { table-layout: fixed; }   .table-set td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   http://blog.sina.com.cn/s/blog_53d27b3a0100veuc.html 
CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
Mydwr的专栏
04-08 1274
关键字: text-overflow:ellipsis 语法：text-overflow : clip | ellipsis   取值： clip ：默认值 。不显示省略标记(...)，而是简单的裁切. ellipsis： 当对象内文本溢出时显示省略标记(...).   可惜text-overflow还只是ie的私有属性而已，也没被收录到w3c标准里 .   如果想让某个容器（d
html5 text overflow,text-overflow属性怎么用
weixin_31653453的博客
06-23 1729
text-overflow属性用于指定当文本溢出包含它的元素时，应该发生的事情。CSS3 text-overflow属性作用：text-overflow 属性规定当文本溢出包含元素时发生的事情。语法：text-overflow: clip|ellipsis|string;clip：修剪文本。ellipsis：显示省略符号来代表被修剪的文本。string：使用给定的字符串来代表被修剪的文本。注：所...
关于表格中文本过长，用text-overflow无法隐藏
wd7mxh38的博客
05-30 344
在未设置任何属性时，表格呈现出如下效果： 当想要将中间的标题文字超出距离的部分隐藏，并不换行，需要设置以下三个属性： 1、设置文本超出部分隐藏： overflow:center 2、设置强制不换行： white-space:nowrap 3、设置超出文本用省略号显示： text-overflow:ellipsis; 现在我们设置了这样的属性 .title{ overflow: hidden; white-space: nowrap;
td 超出宽度隐藏_td内容超出隐藏
weixin_39989796的博客
12-21 791
table标签需要设定属性table-layout: fixed;width:XXXpx;在要超出隐藏的td标签上设定属性 white-space: nowrap;text-overflow: ellipsis;overflow: hidden;解决了这个问题的，我们再来看一下两个基本属性①table-layout属性用来显示表格单元格、行、列的算法规则。所有浏览器都支持 table-layo...
css文本换行属性word-wrap和white-space使用总结
01-19
今天碰到了td文字内容不换行，发现是：white-space: nowrap，即强制文本不进行换行，顺便看了一下文本换行的属性...IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容 table中td.th强制换行方法： 复制代码
表格里使用text-overflow后不能隐藏超出的文本的解决方法
12-13
结合使用`width`属性来指定单元格（`td`）的宽度，`text-overflow`就能按预期隐藏超出的文本，并显示省略号。 完整的工作示例如下： ```css td { text-overflow: ellipsis; /* 或者 clip */ white-space: nowrap...
html表格td溢出显示省略号
qq_35469137的博客
11-07 1043
给td中的文字套了一个p标签，给p标签设置overflow:hidden;并且给p设置宽度 就可以解决以上问题。/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。设置此属性之后td以50%和50%显示 */text-overflow:ellipsis;
将td中文字过长的部分变成省略号显示的小技巧
01-21
最近的做的一个小项目需要用到就百度总结一下写了下来 首先设置表格的样式table-layout：fixed再设置表格的宽度（这步必须） 最后再设置td样式的三个必要属性 复制代码代码如下: text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
ellipsis在table里失效
两只鱼，鱼鱼鱼鱼鱼
07-05 2961
问题：display：table，或者table标签布局之后，设置td（table-cell）文字溢出隐藏ellipsis失效 解决方法： 在table（display：table）的css样式中设置:table-layout:fixed; 在table td 的css样式中设置：overflow:hidden;text-overflow:ellipsis;即可 出现频率太高，遗忘太快。 ...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
weixin_43383479的博客
04-30 8160
在td标签中文字超出显示省略号，鼠标悬停显示所有文本 首先得在table的style中加入table-layout:fixed，让表格固定，然后用width设定表格的宽度。 然后表格中所有的列都一样宽了，这样肯定不好，所以要在tbody上加入<col style="width:10%">这个标签，有几列就加几个，这样就能调节宽度了 然后在td标签中加入如下的属性 <td styl...
text-overflow样式属性值ellipsis的使用方法
gaohuanjie的专栏
08-26 4820
text-overflow样式属性值ellipsis的使用方法
Html table td里使用overflow:hidden无效解决方法
ajoashop的博客
04-27 1万+
在表格里经常用到溢出隐藏，溢出省略，发现直接在td标签里使用overflow:hidden有时无效。 如果遇到这种情况，尝试两种方式可以解决： table td使用overflow:hidden无效解决方法：  解决方法一： 在table里使用table-layout:fixed;   table-
overflow:hidden;text-overflow:ellipsis;在table的td中失效？
S_Chen
12-31 3238
为什么 overflow:hidden;text-overflow:ellipsis;在table的td中失效没有...出现呢？ 废话不多少直接上解决方案： 在table的css样式中设置:table-layout:fixed; 在table td的css样式中设置： overflow:hidden;text-overflow:ellipsis; 这就是你想要的效果了。
td超过的文字设置省略号
ChenYaJie
07-06 2026
加样式 text-overflow:ellipsis; -moz-text-overflow:ellipsis; overflow:hidden; white-space: nowrap; table再加上 table-layout:fixed; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
text-overflowellipsis不生效
最新发布
01-23
### 解决 CSS `text-overflow: ellipsis` 不生效的方法 当遇到 `text-overflow: ellipsis` 不生效的问题时，通常是因为缺少其他必要的样式属性组合。为了使省略号能够正确显示，需要确保以下几点： #### 1. 设置固定宽度或最大宽度 元素必须有一个固定的宽度或最大宽度，以便浏览器知道何时应该截断文本并应用省略号。 ```css width: 200px; ``` #### 2. 防止单词换行 防止单词自动换行是实现单行或多行省略号的关键之一。对于单行省略号而言，应禁止单词换行。 ```css white-space: nowrap; ``` #### 3. 控制溢出行为 通过设置 `overflow:hidden`, 可以隐藏超出容器范围的内容，并配合 `text-overflow:ellipsis` 使用来展示省略标记。 ```css overflow: hidden; ``` #### 4. 启用文本溢出效果 最后一步就是启用实际的文字裁剪和替换为省略号的效果。 ```css text-overflow: ellipsis; ``` 综合以上四点，完整的单行省略号样式的定义如下所示[^3]: ```css .dataTable td { /* essential */ text-overflow: ellipsis; width: 200px; white-space: nowrap; overflow: hidden; /* for good looks */ padding: 10px; } ``` 如果希望创建多行省略号，则还需要额外配置 `-webkit-line-clamp` 和 `-webkit-box-orient` 属性，以及将 `display` 设定为 `-webkit-box`. 这种方式适用于现代Webkit/Blink内核浏览器（如Chrome, Safari）。下面是一个双行省略号的例子[^1]: ```css .two-line-ellipsis { padding-left: 2vw; text-overflow: ellipsis; overflow: hidden; width: 325px; line-height: 25px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-top: 15px; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值