控制换行符以使线条等宽
如果h1太长,无法放入一行,并换行到下一行,我希望这两行的宽度大致相同。我已经到处寻找解决这个问题的css解决方案,但没有找到。
这对于css来说真的是不可能的吗?这似乎是一件如此简单的事情,在如此多的情况下都会有用,所以我真的很困惑,这显然不能用css来完成。
有没有人能推荐一种解决办法,或者下一个最好的办法是什么?
澄清一下,这就是我的意思:
此处的标题太长,一行无法容纳,因此换行到下一行文本
我想要的是:
这里的标题太长,无法容纳
单行,因此换行到下一行文本
解决方案
您可以尝试使用max-width
和word-break
。请注意,如果使用word-break: all
,可能会产生一些连字错误。
两个示例:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.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>
相关文章