Javascript 内部文本换行（<；李>；标签

我在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>

类“clsshorted”包含以下CSS：

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

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

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

“infobox_text”类包含以下CSS：

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

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

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

例如：

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

我遇到的第一个问题是，通过使用JQuery中的“toggleClass（）”函数切换类“clsshorted”。当clsshorted类处于活动状态时，我希望“文本溢出”属性中的“省略”文本被省略在

标记的末尾（在CSS中可以看到该标记的宽度为500px），而不是在我输入的300px上。问题是，由于字符串太长（没有空格），如果我不输入300px，它就不会省略文本或超出框大小。。。（检查JSFIDLE avobe以查看问题）

我遇到的第二个问题是，当“clsshort”类不处于活动状态，因此只有“infobox_text”类处于活动状态时，我希望这个没有空格的大字符串完全显示出来，但要考虑

标记的边界。这意味着，如果

标记的宽度为500px，并且字符串需要显示1501px，则会出现4个对齐的行，其中包含在单词到达方框内容末尾的部分剪切的字符串（500px）

有什么办法吗

---

提前谢谢你

对于第二个问题，您只需要删除

空白：nowrap来自
.infobox\u text
空白：nowrap
与
换行符相反：打断单词。为什么要在同一个类中同时使用这两个词呢？我放置了
空白：nowrap
，因为我不希望文本被随机包装并被视为单个字符串，我使用的是
换行：break word
在单词到达
容器末尾时将其打断…非常感谢您的评论！实际上，当字符串包含一些空格时，当它只是一个大字符串时，我仍然没有相同的性能。尽管如此，您的想法与
display:block
into
.infobox\u text
帮助我在所有情况下都具有相同的性能，当只有
.infobox\u text
类显示时，文本会显示在信息定义的下方（在小提琴示例中，我放置了“description:”text）