控制换行以使线等宽

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

我找到了适用于here的解决方案！它不是CSS，而是IMO的“第二好东西”。它涉及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>