控制换行符以使线条等宽

Control line break to make lines equal width(控制换行符以使线条等宽)
本文介绍了控制换行符以使线条等宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果h1太长,无法放入一行,并换行到下一行,我希望这两行的宽度大致相同。我已经到处寻找解决这个问题的css解决方案,但没有找到。

这对于css来说真的是不可能的吗?这似乎是一件如此简单的事情,在如此多的情况下都会有用,所以我真的很困惑,这显然不能用css来完成。

有没有人能推荐一种解决办法,或者下一个最好的办法是什么?

澄清一下,这就是我的意思:

此处的标题太长,一行无法容纳,因此换行到下一行文本

我想要的是:

这里的标题太长,无法容纳

单行,因此换行到下一行文本

推荐答案

您可以尝试使用max-widthword-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>

这篇关于控制换行符以使线条等宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-
h2Cars Select/h2div class="select"select name="cars"option value="volvo"Volvo/optionoption value="saab"Saab/optionoption value="opel" selectedOpel/optionoption value="audi"Audi/option/select/divstylebody {font-size: 20px;color: #090;background-color: #eee
p5.js WebGL 3d graphics covered by 2d background when rotated(P5.js旋转时被2D背景覆盖的WebGL 3D图形)
Static vector field with classic arrows at every point on p5.js(P5.js上每个点都有经典箭头的静态向量场)
Ball-Triangle Collision(球-三角形碰撞)