css
.text-overflow {
display: block; /*内联对象需加*/
width: 125px;
word-break: normal;
white-space: pre-wrap; /* 不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;
height: 30px;
position: absolute;
}
<!--对超长的文字换行处理:程序和CSS样式--><c:if test="${fn:length(menuVo.chapterName) <=19}"><span class="font-12 text-overflow menuHover" style="font-weight: bold;top: -37px;left: 20px;position: relative;z-index: 3;">${menuVo.chapterName}</span></c:if><c:if test="${fn:length(menuVo.chapterName) >19}"><span class="font-12 text-overflow menuHover" style="font-weight: bold;top: -43px;left: 20px;position: relative;z-index: 3;height:40px;">${menuVo.chapterName}</span></c:if>
white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式
取值: normal | pre | nowrap | pre-wrap | pre-line | inherit
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
inherit: 继承
初始值: normal
继承性: 是
适用于: 所有元素
white:白色.space:间隔,距离
如果觉得《对超长的文字换行处理:程序和CSS样式》对你有帮助，请点赞、收藏，并留下你的观点哦！
