将文本分成两行

有没有办法强制文本的一部分显示在带CSS的新行上？将文本分成两行

所以当HTML看起来像这样：

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

结果将是：

你好，

我的名字是约翰。

HTML是动态生成的，所以我无法更改它。

2017-03-24 Reza

不，请使用两个元素。可以试着用JS打包 – Justinas

把你的html改为'

你好，
我叫约翰。

' –

@StavrosAngelis我知道如何用HTML做，但这不是问题。 – Reza

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

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

请注意，这是相当烦躁：在3.6em是在 “你好” 的宽度和宽度之间的某个地方 “你好，我的”。所以这取决于字体以及你需要破解的单词。我不得不用不同的字体试验一下，找到一个好的平均尺寸。

2017-03-29 20:57:28

不错，谢谢！ – Reza

好的。但请看我刚刚添加的说明（我昨天应该添加的）。 –

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

或只是把另一标签

<p>Hello, </p>&nbsp;<p>my name is John.</p>

2017-03-24 12:09:24 jeanawhou

呃...真的吗？ – Reza

是啊，真的......或者你可以改善你的问题...... – jeanawhou

但是，这还没有考虑到地方的线自动分割。如果你想更自动的东西，你需要使用PHP或JavaScript。

这里是另一个链接的示例： SPLIT HTML INTO different lines

检查，让我知道，如果它可以帮助你。

感谢小号

2017-03-24 12:14:34

有许多方法如何做到这一点。

首先使用HTML的 元素

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

二是把两者它标签

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

三是通过把两者的它带有CSS属性和值的标签clear:both - 这是为了确保没有elem ent将被左右浮动

尝试下面的代码，并希望它可以帮助你。

p { 
 
    clear: both; 
 
}

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

所有这一切都将输出

你好，

我的名字是约翰。

2017-03-24 12:22:20 Grinex

谢谢，但正如我在我的问题中提到的，我无法更改HTML。我正在寻找一个CSS解决方案或类似的。 – Reza

@Reza真的吗？你是使用模板还是使用拖放工具？ – Grinex

不，我正在使用Drupal。我需要它作为其中一个菜单项。 – Reza

简而言之，如果不在文本之间编写代码，则无法分割文本。

按照此链接提供了一个很好的解决方案。

2017-03-24 12:25:45

回答