Split a text into two lines

Question

Is there a way to force a part of a text to display on a new line with CSS?

So when the HTML looks like this:

<p>Hello, my name is John.</p>

The result will be:

Hello,

my name is John.

The HTML is generated dynamically, so I cannot change it.

Answer 1

p::before {
  float: right;
  width: calc(100% - 3.6em);
  height: 1em;
  content: '';
}

<p>Hello, my name is John.</p>

请注意，这有点烦躁：3.6em介于 的宽度"Hello,"和 的宽度之间"Hello, my"。所以这取决于字体以及你需要它打破的单词。我不得不尝试使用不同的字体来找到合适的平均大小。