版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/Originally_M/article/details/88719567单行省略// 单行显示省略号p { overflow ...
单行文本溢出显示省略号 overflow:hidden text overflow:ellipsis white space:nowrap 多行文本显示省略号 display: webkit box webkit box orient:vertical webkit line clamp: overflow:hidden 但是你会发现有的浏览器设置上 webkit box orient:verti ...
2019-09-05 17:00 0 679 推荐指数:
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/Originally_M/article/details/88719567单行省略// 单行显示省略号p { overflow ...
单行及超出省略号 white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; 多行 display ...
...
本博客主要介绍 前端开发中文本过多,以省略号显示。 效果如图: 单行: CSS 多行: CSS ...
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...) 2.white-space: nowrap | normal ...
1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本。 ellipsis:显示省略符号来代表被修剪的文本。 string:使用给定的字符串来代表被修剪的文本。 示例: css ...
1.数字和英文超出自动换行: css添加如下代码: word-wrap: break-word;word-break: normal; 2.单行文字超出显示省略号: css添加如下代码: display:block; white-space:nowrap; overflow ...