CODEWITHSUNDEEP
htmlcssmultiline
gligoran
gligoran

Reputation: 3338

Same-width lines in multiline text in CSS3

I'm trying to make multiline text the same width using CSS3 and no JavaScript.

To illustrate what I'm looking for, let's take this sentence:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

When displaying this text in a narrow container it breaks across multiple lines like this:

Lorem Ipsum is simply dummy text of the printing and

typesetting industry.

What I'd like to do is have it break something like this:

Lorem Ipsum is simply dummy text of

the printing and typesetting industry.

The length of each line is almost the same now.

Is this possible using CSS alone? If not, how else would this be possible?

P.S. The text I'd like to be styled this way is not constant, so fixed width solution won't work.

Upvotes: 9

Views: 10373

Answers (2)

David McKee
David McKee

Reputation: 204

I would look to using text-wrap:balance.

With text-wrap: balance from CSS Text 4, you can request the browser to figure out the best balanced line wrapping solution for the text.

It wasn't widely supported in 2023 but it's now supported by all up-to-date browsers except Firefox for Android, Baidu, QQ and UC for Android.

It's good to know the limitations:

The task of balancing text is not free. The browser needs to loop over iterations to discover the best balanced wrapping solution. This performance cost is mitigated by a rule, it only works for 4 wrapped lines and under.

(the modern limit might be 6 for Chromium and 10 for Firefox)

and to understand what's happening under the hood:

The browser effectively performs a binary search for the smallest width which doesn't cause any additional lines, stopping at one CSS pixel (not display pixel). To further minimize steps in the binary search the browser starts with 80% of the average line width.

Quotes from https://developer.chrome.com/blog/css-text-wrap-balance/

In the future, text-wrap:pretty might be a better solution: it applies a similar algorithm to text-wrap:balance but only to the last few lines of a paragraph to avoid orphans. There's no Firefox or Safari support as of August 2024 though. (Thanks Zach for the heads-up.)

Upvotes: 5

Sooraj
Sooraj

Reputation: 10577

This will not be an exact solution. But this is might be the closest you can reach with CSS alone.

You can use text-align:justify along with word-break:keep-all to make all the lines except the last one take the entire length of the container.

The length of the final line may or may not be close to the length of the container depending on the text.

Using a resizable container to show the same. 

$(function() {
  $("#container").resizable();
});
#container {
  width: 350px;
  height: 200px;
  border: 2px solid #ccc;
  
  text-align:justify;
  word-break:keep-all;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
  Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Nullam vel sem. Aenean commodo ligula eget dolor. Phasellus nec sem in justo pellentesque facilisis. Praesent turpis. Cras varius. Proin magna. Mauris sollicitudin fermentum libero. Donec vitae sapien ut libero venenatis faucibus. Cras dapibus.
</div>

Upvotes: 1

Related Questions