<li>标记内的文本换行

Text wrap inside <li> tag

本文关键字：换行 文本 li      更新时间：2023-09-26

我在div上有以下结构： 

<div class="box1" id="infobox">
<h2> Point characteristics: </h2>
<div style="padding-left:30px" align="left">
<ul>
    <li class="infobox_list"><b>X value: </b><span class="clsshorted infobox_text" id="infobox_xvalue"> </span></li>
    <li class="infobox_list"><b>Y value: </b><span class="clsshorted infobox_text" id="infobox_yvalue"> </span></li>        
    <li class="infobox_list"><b>Description: </b><span class="clsshorted infobox_text" id="infobox_description"> </span></li>
</ul>


其中类"infobox_list"包含以下CSS：

.infobox_list {
    padding: 0px 0px 10px 0px;
    width: 500px;
}

类 "clsshorted" 包含以下 CSS：

span.clsshorted {
    vertical-align: bottom; 
    overflow: hidden; 
    white-space: nowrap; 
    display: inline-block;
    text-overflow: ellipsis;        
    width: 300px;       
}

类 "infobox_text" 包含以下 CSS：

.infobox_text {
    overflow: auto;
    white-space: nowrap;
    word-wrap:break-word;   
}

示例可在以下位置看到： https://jsfiddle.net/nowv94yz/

我一直遇到两个我不知道如何处理的问题：

    我

  1. 遇到的第一个问题是，我通过使用 JQuery 的"toggleClass（）"函数切换了类"clsshorted"。当 clsshorted 类处于活动状态时，我希望来自"text-overflow"属性的"省略号"文本在 <li> 标签的末尾省略号（在 CSS 中可以看到宽度为 500px），而不是在我输入的 300px 上。问题是，由于字符串太长（并且没有空格），如果我不输入 300px，它不会省略文本或超出框大小......（检查JSFIDDLE AVOBE以查看问题）

  2. 我遇到的第二个问题是，当"clsshort"类不处于活动状态时，因此只有"infobox_text"类处于活动状态，我希望这个没有空格的大字符串完全显示，但尊重<li>标签的边界。这意味着，如果 <li> 标签的宽度为 500px，并且字符串需要 1501px 才能显示，则会出现 4 个两端对齐的行，其中包含在单词到达框内容末尾的部分剪切的字符串 （500px）

关于如何做到这一点的任何想法？

提前谢谢你！

对于第二个问题，您只需要从.infobox_text中删除white-space: nowrap;。

相关文章：