问答中心分类: HTML如何在不使用css的情况下从css中换行?
0
Danny Beckett 提问 4天 前

如何在没有?

hello  How are you

输出:

你好
26 Answers
0
Joey Adams 回答 4天 前

您可以使用white-space: pre;使元素像<pre>,保留换行符。例子:

p {
  white-space: pre;
}
<p>hello 
How are you</p>

请注意,对于IE,这只适用于IE8+。

Alan H. 回复 4天 前

通常优于prepre-line,允许包装。

patrick 回复 4天 前

更多关于pre line和pre wrap之间的差异developer.mozilla.org/en-US/docs/Web/CSS/white-space

Greg 回复 4天 前

在我的例子中,我更喜欢pre,因为我也可以使用文本溢出

Vadorequest 回复 4天 前

注意,这对react不起作用,因为文本最终被捆绑并放在同一行上,这不会触发white-spaceCSS规则。

0
Simon_Weaver 回答 4天 前

使用<br/>正常,但用display: none当你不想要的时候。
我希望大多数发现这个问题的人都希望使用css/响应式设计来决定换行符是否出现在特定的位置。(并且没有任何个人反对<br/>)
虽然不是很明显,但实际上你可以申请display:none到a<br/>标记来隐藏它,这使媒体查询能够与语义BR标记一起使用。

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>
@media screen and (min-width: 20em) {
  br {
    display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
  }
}

这在响应式设计中很有用,在这种设计中,您需要强制文本在一个精确的间隔处分成两行。
JSFIDLE示例

fullstackplus 回复 4天 前

西蒙,你说得很对,你举的例子正是我研究这个问题的原因display: none到目前为止,解决方案是最合适和最有用的。

Beejor 回复 4天 前

注意,对于可能导致单词同时运行的情况,可以使用display: inline-block; width: 1em;而不是none.

Simon_Weaver 回复 4天 前

你甚至可以将一个类应用于<br class='foo'>如果你需要更多的控制,但不要太疯狂!

rinogo 回复 4天 前

另一个“我为什么没想到这个?!”答复<br/>擅长于它所做的事情;不需要重新发明轮子。谢谢

Simon_Weaver 回复 4天 前

类似的概念可应用于柔性箱布局:stackoverflow.com/questions/29732575/…

amh15 回复 4天 前

虽然答案很有趣,但提问者希望在没有i、 e.关于HTML中的换行,这是由一些其他答案与预行和预包装CSS解决的。

Simon_Weaver 回复 4天 前

@amh15他没有说他为什么要这么做。或者说BR有什么问题。它是来自天气预报web服务的预格式化文本,还是一个响应性设计问题。在回答时,所有的预/文字包装答案都已经存在。你说得对,细节很重要,但我的回答帮助了很多人,他们发现这个问题是基于关键词的,所以我不明白你为什么要这么挑剔。我很想知道他真正想做什么。但我也不在乎。

0
petermeissner 回答 4天 前

定义空白和换行符的处理有几个选项。<p>标签一个人想要什么很容易得到。
对于保留换行符但不保留空格使用pre-line(不是pre)例如:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

如果需要其他行为,请从以下行为中选择一种(WS=WhiteSpace,LB=LineBreak):

white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

资料来源:W3学校

Ben Lin 回复 4天 前

完美的应为选定答案。

John Sardinha 回复 4天 前

我相信这就是OP想要的。

0
David Latapie 回答 4天 前

这个“\ a”CSS中的命令生成回车。这是CSS,不是HTML,因此它应该更接近您想要的:无额外标记.
在一个blockquote,下面的示例同时显示标题和源链接,并用回车符分隔两者("\a"):

blockquote[title][cite]:after {
  content:attr(title)"\a"attr(cite)
}
YePhIcK 回复 4天 前

幻想,但完全不需要回答这个问题。

renoirb 回复 4天 前

+1因为它只支持CSS,不建议使用pre、br标记,也不建议将显示模式更改为block(这会添加不同的行为,如果父对象处于display:flex因此,这是一种黑客行为)。这并不是幻想,实际上,只是一种现代技术。如果你想要完全相同的标记,但实际反应不同,那就是最好的选择。

Hafenkranich 回复 4天 前

好主意。注意"–不要使用简单的引号'因为你想允许\a将其解析为特殊字符。

pery mimon 回复 4天 前

我想给+1,但在chrome 55上对我不起作用

John 回复 4天 前

如果有一些HTML,也许还有一把小提琴来帮助你可视化你正在做的事情,我会投赞成票。

0
burunoh 回答 4天 前

在CSS中使用代码

p {
  white-space: pre-line;
}

使用此CSS,在P标记将是HTML的换行符。

Stefan Dragnev 回复 4天 前

这正是我要找的!对于JS生成的元素内容(例如,AJAX查询的JSON结果、角度模式表单等)非常适用,这些内容通过转义/清理(例如,不使用ngBindHtml时的正常AngularJS转义行为)传递