Разрыв контрольной линии, чтобы сделать линии равными по ширине

Question

Если h1 слишком длинный, чтобы поместиться в одну строку и переносится на следующую строку, я хочу, чтобы эти две строки были примерно одинаковой ширины. Я искал все это для решения CSS, но безуспешно.

Правда ли, что это невозможно с помощью CSS? Это кажется такой простой вещью, которая была бы полезна во многих случаях, поэтому я действительно озадачен тем, что это явно невозможно сделать с помощью CSS.

Кто-нибудь может порекомендовать какой-нибудь обходной путь, или какой может быть следующая лучшая вещь?

Просто чтобы прояснить, вот что я имею в виду:

Вот заголовок, который слишком длинный, чтобы поместиться в одну строку, поэтому он переносится на следующую строку текста

Что я хочу это:

Вот заголовок, который слишком длинный, чтобы поместиться на

одна строка, поэтому она переносится на следующую строку текста

Answer 1

Вы можете попробовать поиграть с max-width а также word-break, Обратите внимание, что если вы используете word-break: all возможно создать какую-то ошибку переноса.

Два примера:

.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>

Answer 2

Я нашел решение, которое здесь работает! Это не CSS, но это "следующая лучшая вещь" ИМО. В нем задействован jQuery.

Спасибо 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>