Balanced Text Wrapping in HTML

Balanced text wrapping in HTML

Adobe has proposed that a new css property be added text-wrap: balance.

In the meantime they have created a jQuery plugin named balance-text to achieve the same result.

html5 or css 'smart text flow' to evenly distribute a sentence or paragraph over equally wide lines?

I know you asked for a CSS solution but I don't think there is one yet. Below is my JS solution for the meantime.

        function createBetterLineBreaks(el) {            var originalWidth = el.offsetWidth;            var originalHeight = el.offsetHeight;            for (let i = originalWidth - 1; i >= 0; i--) {                el.style.width = `${i}px`;                if (el.offsetHeight > originalHeight) {                    el.style.width = `${i + 1}px`;                    break;                }            }        }        // hover effects        document.querySelector('.box').addEventListener('mouseenter', function () {            createBetterLineBreaks(document.querySelector('.box .text'));        });        document.querySelector('.box').addEventListener('mouseleave', function () {            document.querySelector('.box .text').style.width = 'unset';        });

        .box {            width: 300px;            font-size: 30px;            border: 1px solid black;            border-radius: 5px;            padding: 20px;            display: flex;            align-items: center;            justify-content: center;        }

    <div class="box"><span class="text">hover this box to distribute the text more evenly</span></div>

How to stretch content to fill container while wrapping text evenly only when necessary using CSS?

While trying to find a solution I searched for "css wrap text evenly" in the hopes to first of all figure out how to get text that looks like this:

This text is wrongly distributed in the first example but correctly distributed in the
second example.

To be evenly distributed like this:

This text is wrongly distributed in the first example
but correctly distributed in the second example.

And I found the old question Balanced text wrapping in HTML which indicates that it is currently not possible to do so using CSS though there's a proposal for text-wrap: balance (which has to go through a long process to possibly be accepted, added and supported).

It is possible to use JavaScript to automatically add line breaks accordingly in the correct places.

Using white-space: normal; in the top container (body > div) wraps the text but not with the desired amount of lines as the property's logic to break a line is different than of the intended behavior explained in the question.

How do I maintain a consistent (but unknown) width when performing word wrap using pure HTML + CSS?

Maybe use the css ch unit and a use of javascript.

The use of filter is to remove the white space.

function divide(line){
const length = document.querySelector('div').textContent.split('').filter(i=>i!=" ").length;
document.querySelector('div').style.width = `${length/line}ch`
}
divide(3)

<div>I would prefer it to wrap like this.</div>

How can I evenly balance text over multiple lines?

The CSS Text Module 4 property:

 text-wrap: balance;

will do this. https://drafts.csswg.org/css-text-4/#text-wrap

There's also a package which implements a polyfill for existing browsers.

Here's a demo of balance text. [Archived copy]

CSS text wrapping around left aligned image

Inside h2.sub-title, you need to change the following:

display: inline-block;

to be:

display: flex;

Here's a working example - https://jsfiddle.net/bj3vcxzt/1/

Is there a way to set a breakpoint for word wrapping?

Wrapping each element in a span and disallowing breakage

span {  white-space: nowrap;  border: 1px solid grey;}
div {  width: 250px;  margin: 1em auto;  border: 1px solid red;}

<div>  <span>By John Doe on:</span>  <span>mm/dd/yyyy</span>  <span>HH:MM AM</span></div>

Balancing block elements like lines of text in print

Here's a flexbox solution: Using flex-direction: column and flex-wrap: wrap on the parent element you can make the items wrap from top to bottom and fill another column once the column is filled.

This is the code to get flexbox working:

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;

And here's a demo:

.wrap {  background-color: silver;  height: 100px;  width: 400px;  display: flex;  flex-direction: column;  flex-wrap: wrap;  align-content: flex-start;}.box {   height: 50px;  width: 50px;  background-color: red;  box-sizing: border-box;  border: 1px solid white;}

<div class="wrap">  <div class="box">1</div>  <div class="box">2</div>  <div class="box">3</div>  <div class="box">4</div>  <div class="box">5</div>  <div class="box">6</div>  <div class="box">7</div>  <div class="box">8</div>  <div class="box">9</div>  <div class="box">10</div></div>

---

Related Topics