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>

班级＆＃34; infobox_list＆＃34;包含以下CSS：

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

班级＆＃34; clsshorted＆＃34;包含以下CSS：

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

班级＆＃34; infobox_text＆＃34;包含以下CSS：

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

示例见：https://jsfiddle.net/nowv94yz/

我遇到了两个我不知道如何处理它们的问题：

我遇到的第一个问题是我通过使用＆＃34; toggleClass（）＆＃34;来切换。函数来自JQuery，类＆＃34; clsshorted＆＃34;。当clsshorted类处于活动状态时，我希望省略＆＃34;省略＆＃34;来自＆＃34;文本溢出的文本＆＃34;属性在<li>标记的末尾（在CSS上可以看到宽度为500px）而不是在我输入的300px上进行省略。事情是，因为字符串太长（并且没有空格），如果我不输入300px它不会省略文本或它在框大小之外...（检查jsfiddle avobe以查看问题）< / p>
我遇到的第二个问题是当＆＃34; clsshort＆＃34; class不活跃，因此只有＆＃34; infobox_text＆＃34; class是活动的，我希望这个没有空格的大字符串显示完全显示，但是尊重<li>标记的边框。这意味着如果<li>标签的宽度为500px，并且字符串需要显示1501px，则会出现4个对齐的行，其中包含在单词到达框内容末尾的那些部分上切割的字符串（500px ）

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

提前谢谢！

Answer 1

对于第二个问题，您只需要从.infobox_text删除input。

文本换行在<li>标签内

1 个答案: