沃梦达 / 编程问答 / 前端问题 / 正文

控制换行符以使线条等宽

沃梦达教程前端问题

2022-09-07

Control line break to make lines equal width(控制换行符以使线条等宽)

本文介绍了控制换行符以使线条等宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果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>

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

沃梦达教程

本文标题为：控制换行符以使线条等宽