写多行省略时，出现了内容溢出情况，如下图
内容溢出情况.png
这是我多行省略的代码
多行省略代码.png
查阅百度后，发现浏览器默认是不会在单词内部换行的,只会在单词间换行。这样单词太长就无法换行,导致溢出，设置了溢出隐藏后,内容无法换行就会被截断隐藏,看起来就像是溢出了。
解决方法
在要换行的内容样式中加一个单词强制换行就行了
word-break: break-all;
效果如下
正确的显示.png
写多行省略时，出现了内容溢出情况，如下图
内容溢出情况.png
这是我多行省略的代码
多行省略代码.png
在要换行的内容样式中加一个单词强制换行就行了
word-break: break-all;
效果如下
正确的显示.png
CSS实现单行和多行文本溢出显示省略号…… 1.CSS实现单行和多行文本溢出显示省略号…… 2.多行文本溢出显示省...
CSS实现单行、多行文本溢出显示省略号（…）
实现单行文本溢出的CSS 实现多行文本溢出的CSS 但是！实现多行文本溢出显示省略号的时候webpack不编译-w...
单行溢出省略号 多行溢出省略号 纯 CSS 实现高度与宽度成比例的效果 强制换行
css多行文本溢出显示省略号text-overflowelipsis(省略号)clip(无省略号)string(使...
多行文本溢出省略（按行数） ○ 纯 CSS 实现方案 核心 CSS 语句 -webkit-line-clamp: ...
一、单行文字溢出省略效果 正常300px宽度的段落 文字溢出隐藏效果 关键CSS 测试代码： 二、多行文字溢出省略...
单行文字垂直居中 知道容器的高度即可 html css 多行文字垂直居中 html css 多行文本溢出用省略号表...
多行文本溢出省略 单行文本溢出省略
在线简历 CSS常用套路 伪元素清除浮动多行文字两端对齐垂直居中汇总多行文字溢出省略（多行省略只适用于WebKit...
本文标题：css多行省略却导致内容溢出
本文链接：https://www.haomeiwen.com/subject/rpjibdtx.html
网友评论