当前位置:首页 > 技术 > 前端 > css多行文本省略号,字母,数字不能变为省略号

css多行文本省略号,字母,数字不能变为省略号

DChen5个月前 (02-16)前端4730

在多行文本省略号的基础上添加word-wrap:break-word

word-wrap:break-word; // 通知浏览器不按单词处理元素
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: num;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space:nowrap;         //强制不换行(中英文都起作用)

white-space:pre-wrap;       //只对中文起作用,强制换行

word-break:break-all;        // 只对英文起作用,以字母作为依据,强制换行

word-break:break-word;    //只对英文起作用,以单词作为依据,强制换行

overflow:hidden;               //超出的内容隐藏

text-overflow:ellipsis;        //超出的内容为省略号


强制换行,英文以字母为换行依据,超出的内容设置成省略号

white-space: pre-wrap;        //中文换行
word-break:break-all;        //英文换行,以字母为依据
overflow:hidden;            //隐藏超出的内容
text-overflow:ellipsis;    //超出的内容设置成省略号

强制换行,英文以单词为换行依据,超出的内容设置成省略号

white-space:pre-wrap;        //中文换行
word-break:break-word;       //英文换行,以单词为依据
overflow:hidden;             //隐藏超出部分内容
text-overflow:ellipsis;      //超出部分设置成省略号


转载自:https://blog.csdn.net/weixin_44537264/article/details/102976719

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

版权声明:本文由“憨小猪”发布,如需转载请注明出处。

本文链接:https://www.phper.red/post/152.html

标签: css

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。