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样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。