在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号。
用到的属性有
- text-overflow: ellipsis; /显示省略符号来代表被修剪的文本/
- word-break: break-all; /允许在单词内换行/
- white-space: nowrap; /不换行 控制单行文本/
<!--多行文本超出部分加省略号-->
.a{
width: 300px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*控制文字行数*/
height: 50px; /*控制div的高度*/
}
<!--单行文本超出部分加省略号-->
.b{
width: 300px;
word-break: break-all; /*允许在单词内换行*/
text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
overflow: hidden;
white-space: nowrap;/*不换行 控制单行文本*/
}