溢出的文字如何省略号显示

溢出的文字用省略号显示：

 <style>div {width: 150px;height: 25px;border: 1px solid #ccc;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div>前不见古人后不见来者念天地之悠悠独怆然而涕下</div>
</body>

注意：

white-space:设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容。

 white-space: normal; 默认处理方式white-space: nowrap; 强制在一行显示所有文本，直到文本结束或者遇到br标签对象才换行

text-overflow:设置或检索是否使用一个省略标记(… )表示对象文本的溢出

 text-overflow: clip; 不显示省略标记(...),而是简单的裁切text-overflow: ellipsis; 当对象内文本溢出时显示省略标记(...)

溢出的文字如何省略号显示相关推荐

CSS多余的文本文字使用省略号显示
CSS多余的文本文字使用省略号显示 1.超出一行试用省略号(这里是使用uni-app开发小程序的代码,如果是其他的也是异曲同工之处) 效果如图所示 <view class="omit& ...
css文字超出省略号显示
单行 width:100px; overflow: hidden;/*文字超出隐藏*/ text-overflow: ellipsis;/*文字超出省略号显示*/ white-space: nowra ...
【转】如何用css限制文字长度,使溢出的内容用省略号…显示
文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐由于文字内容长度的不 ...
html css文字用省略号显示
1.单行省略号 <div class="one">哈哈哈哈哈哈哈哈哈哈或或或哈或或哈或哈哈或或哈或哈奥或哈哈哈或哈哈</div> .one{height: ...
css限制一行显示，溢出隐藏，并省略号显示
实现文字一行显示,超出省略号显示实现规则:限制宽高,然后再添加下面三行代码即可 overflow: hidden;//溢出隐藏text-overflow: ellipsis;//超出省略号显示whi ...
Android ellipsize属性(多余文字用省略号显示)
TextView中可以设置一个ellipsize属性,作用是当文字长度超过textview宽度时的显示方式: 例如,字符串"abcedfghijklmn" 的各种现实效果: and ...
Flex布局下,文字超出省略号显示无效解决方案
默认的flex布局下的标题文字超出后省略号显示无效解决办法: 在flex:1的盒子中,设置overflow: hidden; 或 width: 0;即可. <div class=" ...
js超过的文字用省略号显示
省略多余字符,用...显示. js方法: export function ellipsis(value, len) { if (!value) return '' if (value.length & ...
使用element-UI树形结构文字超出省略号显示
树形当文字超出设定宽度时,无法正常显示使用标签的title属性 <el-tree:data="comTreeList"ref="tree"class= ...
单行溢出文字省略号显示（HTML、CSS）
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...

溢出的文字如何省略号显示

溢出的文字如何省略号显示相关推荐

最新文章

热门文章