文字換行 <li> 標簽

Question

我在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）上切掉的字符串。

有關如何執行此操作的任何想法？

先感謝您！

Answer 1

對於第二個問題，您只需要刪除white-space: nowrap; 來自.infobox_text 。