In this div, the structure is as follows:
<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>
Within the "infobox_list" class, the following CSS is contained:
.infobox_list {
padding: 0px 0px 10px 0px;
width: 500px;
}
The "clsshorted" class has the following CSS properties:
span.clsshorted {
vertical-align: bottom;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
width: 300px;
}
Lastly, the "infobox_text" class contains the following CSS attributes:
.infobox_text {
overflow: auto;
white-space: nowrap;
word-wrap: break-word;
}
Take a look at an example here: https://jsfiddle.net/nowv94yz/
I've encountered two specific issues that I'm unsure how to address:
The first issue arises when toggling the "clsshorted" class using JQuery's "toggleClass()" function. When the clsshorted class is active, I want the text truncated by the "text-overflow" property to be shortened at the end of the
<li>tag (which is set to 500px width in the CSS) rather than at the 300px limit specified. The challenge lies in lengthy strings with no spaces not being properly truncated if the 300px restriction is removed, leading to improper ellipsis placement or overflowing outside the box size (refer to the provided jsfiddle link).The second issue occurs when only the "infobox_text" class is active, without the "clsshort" class. In this scenario, I desire long spaceless strings to be fully displayed within the borders of the
<li>tag, despite exceeding its width. Specifically, if the<li>tag is 500px wide and the string requires 1501px to display entirely, it should appear across four justified rows, where text is cut off at the box's end (500px).
Any insights on resolving these challenges would be greatly appreciated.
Thank you for your help!