使用纯 HTML + CSS 执行自动换行时如何保持一致（但未知）的宽度？

Question

这对 Google 来说是一个非常难的问题，因为有很多类似的问题用类似的措辞。具体来说，我追求的纯粹是出于审美目的：

A long string can wrap like
this.

...但是：

I would prefer it
to wrap like this.

请注意，虽然它们都是两行，但它们不一定是两行。较短的行仍将正常显示：

Short Title...

...你可以有更长的行：

This is what a
solution might
look like if it
spanned multiple
lines.

Here's the exact problem I'm trying to solve.

我更喜欢它来平衡每行的长度，即使文本的左右两侧有更多 space。这个想法是每行的宽度与其上方的宽度一致。

问题是要换行的文本是动态的，可以有任意长度。我想知道是否有办法以非编程方式执行此操作。

我相信在 JavaScript 中应该有几种方法可以做到这一点，但首先我想用现代 HTML 和 CSS.[=17= 用尽我的选择]

谢谢！

Answer 1

我想如果你使用div并改变他的宽度

<!DOCTYPE html>
<html>
 <head>
  <style>
   .myDiv {    
    text-align: center;
    width: 100px;
   }
  </style>
 </head>
 <body>
  <h1>Normal text Normal text Normal text</h1>
  <div class="myDiv">
   <h2>Div text Div text Div text Div text Div text Div text</h2>
  </div>
  <h1>Normal text Normal text Normal text</h1>
 </body>
</html>

在相同的 css 和 html 中执行它可能是不可能的，但我发现使用 javascript

Here you have the link

Answer 2

也许使用 css ch 单位并使用 javascript.

使用filter是去除白色space。

function divide(line){
const length = document.querySelector('div').textContent.split('').filter(i=>i!=" ").length;
document.querySelector('div').style.width = `${length/line}ch`
}
divide(3)

<div>I would prefer it to wrap like this.</div>

function divide(line) {
  const length = document.querySelector('div').textContent.split('').filter(i => i != " ").length;
  document.querySelector('div').style.width = `${length/line}ch`
}
divide(4)

<div>This is what a solution might look like if it spanned multiple lines.
</div>

使用纯 HTML + CSS 执行自动换行时如何保持一致（但未知）的宽度？

How do I maintain a consistent (but unknown) width when performing word wrap using pure HTML + CSS?

html

css

word-wrap