javascript – How to get a text to come out on a single line in HTML?

Question:

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 thewhite-space when set to nowrap removes line breaks. The other possible values normal , pre , pre-wrap and pre-line were not very helpful since the text did not then come out in a single line.

I also read that there are several ways to interpret the presence of a new line with the characters \ r and \ n ( return of line and new line ) in the following links:

What is the difference between \ r and \ n

https://es.wikipedia.org/wiki/Nueva_Línea

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 solution in CSS that I don't know about or should I use some javascript snippet to create a component like the one I'm showing you?

Answer:

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 white-space when set to pre if preserves the line breaks, even takes into account when it encounters an element <br/> but creates this curious effect.

 $(function() { var textoLargo = 'Lorem ipsum dolor amet ipsum dolor amet ipsum dolor amet ipsum dolor amet\r\n' + 'ipsum dolor\r\n' + 'amet Lorem ipsum dolor amet Lorem ipsum\n' + 'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' + 'Lorem ipsum dolor amet Lorem ipsum dolor amet\n'; $('#empty').html(textoLargo); });
 .line-container { width: 200px; height: 20px; } .single-line { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: pre; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Probando distintos separadores</h3> <div class="line-container"> <div id="empty" class="single-line"> </div> </div> <h3 style="margin-top: 100px">Usando elementos br como separadores</h3> <div class="line-container"> <div class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet <br/>Lorem ipsum <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet <br/> </div> </div>

What it does is create little snippets of text cut out. The text-overflow when set to ellipsis trims the text that exceeds the size of its container, so it is necessary to use overflow: hidden; in conjunction with the white-space to show the ellipse ... in case the text is larger.

Getting there I just had to apply another overflow: hidden; to the container and voila!

 $(function() { var textoLargo = 'Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r\n' + 'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' + 'amet Lorem ipsum dolor amet Lorem ipsum\n' + 'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' + 'Lorem ipsum dolor amet Lorem ipsum dolor amet\n'; var primeraLineaCorta = 'Lorem ipsum dolor \r\n' + 'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' + 'amet Lorem ipsum dolor amet Lorem ipsum\n' + 'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' + 'Lorem ipsum dolor amet Lorem ipsum dolor amet\n'; $('#long').html(textoLargo); $('#short').html(primeraLineaCorta); });
 .line-container { width: 200px; height: 20px; overflow: hidden; } .single-line { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: pre; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <h3>Probando distintos separadores</h3> <div class="line-container"> <div id="long" class="single-line"> </div> </div> <h3 style="margin-top: 30px">Si el texto es mas pequeño</h3> <div class="line-container"> <div id="short" class="single-line"> </div> </div> <h3 style="margin-top: 30px">Si se usa br como separador</h3> <div class="line-container"> <div id="short" class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet <br/>Lorem ipsum <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet <br/> </div> </div> <h3 style="margin-top: 30px">Si se usa br y el texto es pequeño</h3> <div class="line-container"> <div id="short" class="single-line">Lorem ipsum dolor <br/> </div> </div>

You only need to use this little css snippet to achieve it

.line-container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}

.single-line {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
}

Note: According to the documentation for the white-space this solution does not work when only \r is used as a separator. According to the SO article that only applies to older Macs which I think is quite acceptable. If this is the case, the return characters \r would have to be replaced by \n using javascript to achieve this effect.

Scroll to Top