I have a case where I want to show a text that occupies the entire width of its container and does not occupy more than a single line, but in case it has line separator characters, it does not show the consecutive lines.
I tried the following code in pure CSS:
.line-container {
width: 230px;
height: 20px;
}
.single-line {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}<div class="line-container">
<div class="single-line">Lorem
ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor
amet Lorem ipsum dolor amet Lorem ipsum
dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
Lorem ipsum dolor amet Lorem ipsum dolor amet</div>
</div>This works fine but only if there are no line return characters as the property white-spacewhen set to nowrapremoves line breaks. The other possible values normal, pre, pre-wrapand pre-lineweren't much help since the text didn't output on 1 single line then.
I also read that there are several ways to interpret the presence of a new line with the characters \r and \n ( line return and new line ) in the following links:
What is the difference between \r and \n
https://es.wikipedia.org/wiki/New_Line
I imagine that if I am reading a text from a database or a file and receiving it from a server, this can bring me many inconveniences if it was written in different operating systems.
Is there a CSS solution that I don't know about or should I use a javascript snippet to create a component like the one I'm showing you?
I finally got what I wanted. I didn't have to use javascript, just CSS.
In this way I was able to achieve a portable solution for any environment and incredibly according to the spec it can work even in Internet Explorer 6.
It turns out that the property
white-spacewhen set topreif preserves line breaks, it even takes into account when it encounters an element<br/>but it does create this funny effect.What it does is create small clipped snippets of text. When the property
text-overflowis set to it, itellipsiscuts the text that exceeds the size of its container, so it is necessary to use itoverflow: hidden;in conjunction with the propertywhite-spaceso that the ellipsis is displayed...in case the text is larger.Getting there I just had to apply another one
overflow: hidden;to the container and that's it!It is only necessary to use this small css snippet to achieve it
Note: According to the documentation of the property
white-spacethis solution does not work when it is only used\ras a separator. According to the SO article that only applies to older Macs which I think is quite acceptable. If this is the case, you would have to replace the return characters with\rusing\njavascript to achieve this effect.The parent div that contains the div that displays the text, has a fixed size, that does not allow the text to be displayed correctly, eliminate the class
.line-containersee the online example here
I also tell you that if your text has line breaks or line returns, through Javascript you could filter those non-printable characters, for example:
Using this regex and the replace() method you can remove line breaks and returns:
You should add a
"<br/>"where you want to make the line breakThe reason is that html didn't interpret an "enter" as a line break =)