Control line break to make lines equal width

Question

If an h1 is too long to fit in one line and wraps to the next line, I want those two lines to be roughly the same width. I have searched all over for a CSS solution to this, with no luck.

Is it really true that this is not possible with CSS? It seems like such a simple thing that would be useful in so many instances, so I'm really puzzled that this appearantly can't be done with CSS.

Can anyone recommend some kind of workaround, or what the next best thing might be?

Just to be clear, this is what I mean:

Here is a headline that's too long to fit on a single line, so it wraps to the next line of text

What I want is this:

Here is a headline that's too long to fit on a

single line, so it wraps to the next line of text

One of the way is, wrap h1 inside a span or div and give max-width to the wrapper so that it will automatically wrap to next line if it exceeds that width. But if your question is , it should wrap and both lines should have exact same width then it can not be done using css only. — AKNair, Sep 27 '18 at 12:38
Roughly the same width as far as the text allows, not necessarily the exact same width. And if the screen is wide enough, it should not wrap at all. — ReddaJoppe, Sep 27 '18 at 12:54

score 1 · Answer 1 · answered Sep 27 '18 at 12:44

1

You can try playing with a max-width and word-break. Note that if you use word-break: all maybe create some hyphenation error.

Two examples:

.example-1 {
  max-width: 610px; 
  width: 800px;
  word-break: break-word;
}

.example-2 {
  max-width: 610px; 
  width: 800px;
  word-break: break-all;
}

<div class="example-1">
  <h1>Here is a headline that's too long to fit on a single line, so it wraps to the next line of text</h1>
</div>

<div class="example-2">
  <h1>Here is a headline that's too long to fit on a single line, so it wraps to the next line of text</h1>
</div>

answered Sep 27 '18 at 12:44

decabeza

124
6

Thanks, but if I set a max-width that's narrower than the h1, then it will also wrap on larger screens where it could fit on a single line. – ReddaJoppe Sep 27 '18 at 12:52
1

for that cases of bigger screens you can use media queries for defining classes for any screen size specific https://www.w3schools.com/css/css_rwd_mediaqueries.asp – Nezir Sep 27 '18 at 12:55

score 0 · Answer 2 · edited Aug 29 '20 at 18:34

I found a solution that works here! It's not CSS, but it is "the next best thing" IMO. It involves jQuery.

Thanks to Kaivosukeltaja!

https://codepen.io/Kaivosukeltaja/pen/jWYqZN

function adjust() {
  $('.quote').each(function() {
    // Create an invisible clone of the element
    var clone = $(this).clone().css({
      visibility: 'hidden',
      width: 'auto'
    }).appendTo($(this).parent());
    
    // Get the bigger width of the two elements to be our starting point
    var goodWidth = Math.max($(this).width(), $(clone).width());
    var testedWidth = goodWidth;
    var initialHeight = $(clone).height();

    // Make the clone narrower until it wraps again, causing height to increase
    while($(clone).height() == initialHeight && testedWidth > 0) {
      goodWidth = testedWidth;
      testedWidth--;
      $(clone).width(testedWidth);
    }

    // Set original element's width to last one before wrap
    $(this).width(goodWidth);
    
    // Remove the clone element
    $(clone).remove();
  });
}

$(window).resize(adjust);
$(document).ready(function() {
  adjust();
});

body {
  background-color: #f0f0f0;
}

.holder {
  text-align: center;
  margin: 2em auto;
}
.quote {
  display: inline-block;
  border: 1px solid #c0c0c0;
  background-color: #fff;
  padding: 1em;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="quote">
    If I want text to wrap, I want the lines as close to equal length as possible.
  </div>
</div>

Control line break to make lines equal width

Here is a headline that's too long to fit on a single line, so it wraps to the next line of text

Here is a headline that's too long to fit on a

single line, so it wraps to the next line of text

2 Answers2

Linked