如何从css换行，不使用<br />?

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

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

output:

hello
How are you
1372941 次浏览
小开

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

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

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

小开
最佳答案

相同的HTML结构是不可能的，你必须有一些东西来区分Hello和How are you。

我建议使用__abc0，然后显示为块(实际上就像<div>)。

p span {
display: block;
}
<p><span>hello</span><span>How are you</span></p>

小开

Vincent Robert和Joey Adams的答案都是正确的。然而，如果你不想改变标记，你可以使用javascript插入<br />。

在CSS中，不改变标记是无法做到这一点的。

小开

要使元素在后面有换行符，为它赋值:

display:block;

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

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

小开

下面是一个糟糕问题的糟糕解决方案，但它确实符合概要:

p {
width : 12ex;
}


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

CSS中的“\ a"命令生成一个回车。这是CSS，而不是HTML，所以它应该更接近你想要的:无额外加价。

在blockquote中，下面的例子同时显示标题和源链接，并用回车符("\a")分隔两者:

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

__abc0标签怎么样?

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

小开
在我的例子中，我需要一个输入按钮前面有一个换行符 我应用以下样式的按钮，它工作:

clear:both;
小开

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

我所在的元素是display: flex，所以我必须使用flex-direction: column。

小开
有几个选项可以定义空格和换行符的处理。 如果一个人可以把内容放在例如<p>标签中，那么就很容易得到他想要的任何东西

要保留换行符而不保留空格，请使用pre-line(而不是pre)，如in:

<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学校

小开

正常使用<br/>，但当你不需要它时，用display: none隐藏它。

我希望大多数发现这个问题的人都想使用css /响应式设计来决定是否在特定的位置出现换行符。(并且没有任何个人反对<br/>)

虽然不是很明显，但实际上你可以将display:none应用于<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) */
}
}

这在响应式设计中非常有用，在这种设计中，您需要在精确的换行处强制将文本分成两行。

jsfiddle example

小开

如果这能帮助到某人…

你可以这样做:

<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;
}
小开

在CSS中使用代码

p {
white-space: pre-line;
}

在这个CSS中，P标记中的每个输入都将是HTML中的一个断行符。

小开

基于之前所说的，这是一个工作的纯CSS解决方案。

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

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

p {
padding-right: 50%;
}

对我来说，在响应式设计的情况下工作得很好，只有在一定的宽度范围内，文本才需要被分割。

小开

将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: ' ';}
}
小开

使用&nbsp;代替空格可以防止断点。

<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>
小开

有关链接列表

其他答案根据具体情况提供了一些添加换行符的好方法。但应该注意的是，: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的技术，它更简单，更兼容。它没有将风格和内容分开，需要更多的代码，并且可能在某些情况下您希望在事后添加中断。不过这仍然是一个很好的解决方案，尤其是对于老版本的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>

注意以上解决方案的优点:

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

小开

这适用于Chrome浏览器:

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

我喜欢非常简单的解决方案，这里还有一个:

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

和CSS:

p {
display: flex;
flex-direction: column;
}
小开

像这样使用overflow-wrap: break-word;:

.yourelement{
overflow-wrap: break-word;
}
小开

我猜您不希望使用断点，因为它总是会断行。对吗?如果是这样，如何在你的文本中添加断点<br />，然后给它一个像<br class="hidebreak"/>这样的类，然后在你想要它中断的大小之上使用媒体查询来隐藏<br />，这样它就会在特定的宽度上中断，但在该宽度之上保持内联。

HTML:

<p>
The below line breaks at 766px.
</p>


<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

小开

你需要在<span class="class_name"></span>中声明内容。过了它，线就断了。

\A表示换行字符。

.class_name::after {
content: "\A";
white-space: pre;
}
小开

代码可以是:

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS将是:

.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
小开

使用 white-space 不会起作用对于长句子没有像HiHowAreYouHopeYouAreDoingGood...etc这样的空格来解决这个问题，可以考虑使用word-wrap: break-word;来代替

它允许长单词被打断并换行到下一行。，它被脸谱网， Instagram和我使用😆

例子

#container {
width: 40%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
white-space: pre-line;
background-color: green;
}
.flex{
display: flex;
}


#wrap {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#wrap p{
word-wrap: break-word;
background-color: green;
}
<h1> white-space: pre-line;</h1>
<div class='flex'>


<div id="container">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>


<div id="container">
<h5>No specaes (not working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>








<h1>  word-wrap: break-word;</h1>
<div class='flex'>


<div id="wrap">
<h5>With spaces </h5>
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>


<div id="wrap">
<h5>No specaes (working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>

小开

在css技巧上，Chris Coyier已经测试了许多选项，最后一个非常整洁的选项是使用display:table，每个选项都有自己的问题，当你在span上使用background-color时，你会发现!

body {
padding: 20px;
font-family: 'Open Sans', sans-serif;
}


h1 {
font-weight: 300;
font-size: 24px;
line-height: 1.6;
background: #eee;
padding: 20px;
margin: 5px 0 25px 0;
text-align:center;
}
h1 span {
color: white;
font-weight: 900;
}


h1 span {
background: black;
padding: 1px 8px;
display: table;
margin:auto;
}
<h1 class="one">


Break right after this
<span>
and before this
</span>


</h1>

在这里你可以看到codepen上的所有其他选项:

< a href = " https://codepen。/a> . io/ chriscoyer /pen/LNamvy" rel="nofollow noreferrer">注入换行符 . io/ chriscoyer /pen/LNamvy" rel="nofollow noreferrer


提交答案