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

2021-09-16 01:252794
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浏览器没有这个功能,多出的内容只能隐藏起来。


两行:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;    /*以此类推,3行4行直接改数字就好啦*/
/*! autoprefixer: off */
-webkit-box-orient: vertical;


上一篇: ThinkCMF前台调用ApiService下方法实例

下一篇: ThinkCMF5.0 后台密码忘记找回