如何从css中断行,而不使用<br />?

输出:

你好
你好吗

码:

<p>hello <br /> How are you </p> 

如何实现相同的输出没有<br />

不可能有相同的HTML结构,你必须有一些区别HelloHello

我build议使用span ,然后将显示为块(就像实际上<div> )。

HTML:

 <p><span>hello</span><span>How are you</span></p> 

CSS:

 p span { display: block; } 

你可以使用white-space: pre; 使元素像<pre>一样保留换行符。 例:

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

请注意,这在IE6或IE7中不起作用。 我不知道关于IE8。

我期望大多数人发现这个问题想要使用CSS /响应式devise来决定是否在特定的地方出现换行符。 (没有什么真正的个人对抗)

虽然不是很明显,但您实际上可以将display:none应用于标签以隐藏它,从而可以将媒体查询与语义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 (ie disable the line break) } } 

这在响应式devise中非常有用,在这种devise中,您需要在精确的中断处将文本强制为两行。

http://jsfiddle.net/nNbD3/1/

有几个选项来定义处理空格和换行符。 如果可以将内容放在<p>标签中,那么得到任何想要的东西都是非常容易的。

为了保留换行符,而不是空格,使用pre-line (不是pre ),如:

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

如果想要另一个行为,可以select其中一个(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学校

CSS中的“\ a”命令生成回车符。 这是CSS,而不是HTML,所以它应该更接近你想要的: 没有额外的标记

在下面的例子中,下面的例子显示了标题和源代码链接,并用回车( "\a" )分隔两个:

 blockquote[title][cite]:after { content:attr(title)"\a"attr(cite) } 

基于之前所说的,这是一个纯粹的CSS解决scheme。

 <style> span { display: inline; } span:before { content: "\a "; white-space: pre; } </style> <p> First line of text. <span>Next line.</span> </p> 

在CSS中使用代码

 p { white-space: pre-line; } 

有了这个代码的CSS每个进入内部的P标签将是一个断线在HTML。

为了使一个元素之后有一个换行符,分配它:

display:block;

块级元素之后的非浮动元素将出现在下一行。 许多元素,如<p>和<div>已经是块级元素,所以你可以使用它们。

但是,虽然这是很好的知道,这实际上更依赖于您的内容的上下文。 在你的例子中,你不想使用CSS来强制换行。 <br />是合适的,因为语义上p标签是最适合您正在显示的文本。 更多的标记只是为了挂起CSS是没有必要的。 从技术上讲,这不完全是一个段落,但没有<greeting>标签,所以使用你所拥有的。 用HTMl很好地描述你的内容是更重要的 – 在你完成之后,弄清楚如何使它看起来很漂亮。

对于一个糟糕的问题,这是一个糟糕的解决scheme,但是从字面上来看,

 p { width : 12ex; } p:before { content: "."; float: right; padding-left: 6ex; visibility: hidden; } 

对于链接列表

其他答案提供了一些添加换行符的好方法,具体情况取决于情况。 但是应该注意的是:afterselect器:after ,为了控制链接列表 (以及类似的东西)的CSS控制,这是更好的方式之一,原因如下。

下面是一个例子,假设一个目录:

 <style type="text/css"> .toc a:after{ content: "\a"; white-space: pre; } </style> <span class="toc"> <a href="#a1">Item A1</a> <a href="#a2">Item A2</a> <a href="#b1">Item B1</a> <a href="#b2">Item B2</a> </span> 

这里是Simon_Weaver的技术,它更简单,更兼容。 它不会将样式和内容分开,需要更多的代码,并且可能会在事实之后添加中断。 仍然是一个很好的解决scheme,尤其是对于较老的IE

 <style type="text/css"> .toc br{ display: none; } /* comment out for horizontal links */ </style> <span class="toc"> <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/> <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/> </span> 

请注意上述解决scheme的优点:

  • 无论在HTML中的空白,输出是相同的(与pre
  • 没有额外的填充添加到元素(见NickG的display:block注释)
  • 您可以轻松地在一些共享的CSS之间切换水平和垂直的链接列表,而无需进入每个HTML文件进行样式更改
  • 没有floatclear风格影响周围的内容
  • 风格与内容是分开的(对比<br/>或者用硬编码的中断)
  • 这也可以用于使用a.toc:after<a class="toc">松散链接
  • 您可以添加多个中断,甚至前缀/后缀文本

也许有人会和我有同样的问题:

我在一个display: flex的元素,所以我不得不使用flex-direction: column

如何<pre>标签?

来源: http : //www.w3schools.com/tags/tag_pre.asp

例如,您可以添加大量的填充和强制文本以拆分为新行

 p{ padding-right: 50%; } 

在适应性devise的情况下,对于我来说工作得很好,只有在一定的宽度范围内才需要分割文本。

设置一个br标签display: none是有帮助的,但是你可以用WordsRunTogether结束。 我发现它更有帮助,取而代之的是一个空格字符,如下所示:

HTML:

 <h1> Breaking<br />News:<br />BR<br />Considered<br />Harmful! </h1> 

CSS:

 @media (min-device-width: 1281px){ h1 br {content: ' ';} h1 br:after {content: ' ';} } 
 <pre> <--------------------------------------- lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </pre> <-------------------------------------- 

要么

 <div style="white-space:pre"> <----------------------------------- lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div> <----------------------------------- 

来源: https : //stackoverflow.com/a/36191199/2377343

使用&nbsp; 而不是空格将防止rest。

 <span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span> 

别。 如果你想要一个强硬的线路rest,使用一个。

文森特·罗伯特和乔伊·亚当斯的答案都是有效的。 如果你不想要,但是,改变标记,你可以插入一个<br />使用JavaScript。

在没有改变标记的情况下,没有办法在CSS中做到这一点。

在我的情况下,我需要一个inputbutton之前有一个换行符。
我将下面的样式应用于button,它工作:

 clear:both; 

如果这有助于某人…

你可以这样做:

 <p>This is an <a class="on-new-line">inline link</a>?</p> 

有了这个CSS:

 a.on-new-line:before { content: '&nbsp;'; font-size:0; display:block; line-height:0; } 

这在Chrome中起作用:

 p::after { content: "-"; color: transparent; display: block; }