text-overflow

语法：

text-overflow ： clip | ellipsis

取值：

clip：: 不显示省略标记（...），而是简单的裁切。
ellipsis：: 当对象内文本溢出时显示省略标记（...）

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>text-overflow</title>

</head>

<body>

.div_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:100px; }

.div_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100px; }

.fffd{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; otextoverflow: ellipsis;width: 30px; }

</style>

<div class="div_clip">fsssssssssssssssssdfffff</div>

<div class="div_ellipsis">fsssssssssssssssssdfffff</div>

<tr>

<td class="fffd">ffffffffffffffffffffffffffffsssssssssss</td>

</tr>

</table>

</body>

</html>

说明：以下3 个属性要一起设置，并且要给容器设置宽度，如果是表格的话要将布局方式改为table-layout:fixed。

verflow: hidden;

text-overflow:ellipsis;

white-space:nowrap;

转载于:https://blog.51cto.com/guangge/1201574

CSS 文字超出长度的显示省略号的方法总结相关推荐

css文字超出盒子宽度显示省略号
单行超出显示省略号 white-space:nowarp; overflow:hidden; text-overflow:ellipsis; 超出两行显示省略号 overflow: hidden;te ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
一.uni-app中,固定宽高,文字超出部分,隐藏并显示省略号. .topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max ...
css 文字超出部分自动加省略号
在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号. 用到的属性有 text-overflow: ellipsis; /显示省略符号来代表被修剪的文本/ word-b ...
css设置超出几行显示省略号（单行、多行）,兼容数字英文不换行问题，兼容中文字符隔空换行问题
1.单行文本超长显示省略号 /* css */ p{overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-spa ...
CSS实现标题文字过长部分显示省略号的方法
2019独角兽企业重金招聘Python工程师标准>>> 单行效果: <!DOCTYPE html> <html lang="en">< ...
CSS设置超出几行显示省略号
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //行数 /* auto ...
html标题过长如何隐藏,CSS实现标题文字过长部分显示省略号的方法
单行效果: Document 四岁的弗拉吉米尔在西红柿上挖了个洞,她用勺子搅了半天,突然哭了起来."孩子,怎么了?为什么哭呢?"妈妈问."你们都说西红柿里有维生素,可我怎 ...
CSS文字超出部分省略号显示
文章目录[隐藏] CSS 文字超出部分省略号显示前言 CSS 文字超出部分省略号显示实现方法 CSS 文字超出部分省略号显示实现效果 CSS 文字超出部分省略号显示前言在我们开发过程中,其实有这样的 ...

CSS 文字超出长度的显示省略号的方法总结

text-overflow

text-overflow

语法：

取值：

说明：

CSS 文字超出长度的显示省略号的方法总结相关推荐

最新文章

热门文章