Text wrap inside <li> tag

Question

I have the following structure on a 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>

Where the class "infobox_list" contains the following CSS:

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

The class "clsshorted" contains the following CSS:

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

And the class "infobox_text" contains the following CSS:

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

Example can be seen at: https://jsfiddle.net/nowv94yz/

I have been encountering two problems which I don't know how to deal with them:

1. The first problem I have been encountering is that I toggle, by using the "toggleClass()" function from JQuery, the class "clsshorted". When the clsshorted class is active I would like that the "ellipsised" text from the "text-overflow" property is ellipted at the end of the <li> tag (which as it can be seen at the CSS is 500px width) instead than on the 300px that I input. The thing is that as the string is so long (and with no spaces) that if I do not input that 300px it does not ellipsisate the text or it does outside the box size... (check jsfiddle avobe to see the problem)

2. The second problem I have been encountering is that when the "clsshort" class is not active, and thus only the "infobox_text" class is active, I would like this large string without spaces to appear completely displayed, but respecting the borders of the <li> tag. This means that if the <li> tag is 500px width, and the string would need 1501px to be displayed, 4 justified rows appear containing the string cutted on those part where the word reaches the end of the content of the box (500px)

Any ideas on how to do this?

Thank you in advance!

Answer 1

For the second problem, you just need to remove white-space: nowrap; from .infobox_text .