在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号。
用到的属性有
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;/*不换行 控制单行文本*/}