禁止换行超出用省略号三个点表示 css

2021-09-16 01:251594
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis; 
display: -webkit-box;
-webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 垂直排列 */
word-break: break-all;  /* 内容自动换行 */

white-space:nowrap; 是禁止换行。
overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,

Opera浏览器用-o-text-overflow:ellipsis; 

而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。

上一篇: 详情页video标签手机页面显示css设置

下一篇: CSS 弧形边框 水滴效果 气泡效果