如何从css中断行，而不使用<br />？
输出：
你好
你好吗
码：
<p>hello <br /> How are you </p> 如何实现相同的输出没有<br /> ？
不可能有相同的HTML结构，你必须有一些区别Hello ， Hello 。
我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中，您需要在精确的中断处将文本强制为两行。
有几个选项来定义处理空格和换行符。 如果可以将内容放在<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文件进行样式更改
- 没有
float或clear风格影响周围的内容 - 风格与内容是分开的（对比
<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
使用 而不是空格将防止rest。
<span>I DONT WANT TO BREAK THIS LINE 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: ' '; font-size:0; display:block; line-height:0; }
这在Chrome中起作用：
p::after { content: "-"; color: transparent; display: block; }
