对于链接列表

Question

输出：

你好，你好吗

码

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

如何在没有 的情况下实现相同的输出？

Answer 1

不可能使用相同的HTML结构，您必须要区分Hello和How are you。

我建议您使用span，然后将其显示为块（实际上就像<div>一样）。

HTML：

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

CSS：

p span 
{
    display: block;
}

Answer 2

您可以使用white-space: pre;将元素设置为<pre>，这样可以保留换行符。例如：

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

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

Answer 3

正常使用` `，但在您不想要时将其隐藏`display: none`。

我希望大多数人发现这个问题都想使用css /响应式设计来决定是否在特定的地方出现换行符。（并且没有针对 ）

的任何个人信息

虽然不是很明显，但您实际上可以将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 (i.e. disable the line break)
    }
 }

这在响应式设计中非常有用，您需要在完全中断时将文本强制为两行。

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

Answer 4

有几种选项可用于定义空格和换行符的处理。如果可以将内容放入例如一个标签很容易得到你想要的任何东西。

保留换行符但不是空格使用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 */

SOURCE: W3 Schools

Answer 5

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

在blockquote中，下面的示例显示标题和源链接，并使用回车符（"\a"）分隔两个：

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

Answer 6

在CSS上使用代码

p {
    white-space: pre-line;
}

使用此代码css，每个在P标签内输入的内容都将是html的分界线。

Answer 7

基于之前的说法，这是一个有效的纯CSS解决方案。

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

Answer 8

要使元素之后有换行符，请指定它：

display:block;

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

但是，虽然这很有用，但这实际上更多地取决于您的内容的背景。在您的示例中，您不希望使用CSS强制换行。＆lt; br /＆gt;是合适的，因为在语义上，p标签最适合您正在显示的文本。只需要将CSS挂起来就可以使用更多标记。从技术上讲，它不是完全一个段落，但没有＆lt; greeting＆gt;标签，所以使用你拥有的。使用HTMl很好地描述您的内容更为重要 - 在您拥有然后找出如何让它看起来漂亮。

Answer 9

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

OR

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

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

Answer 10

对于一个糟糕的问题，这是一个糟糕的解决方案，但这个问题完全符合这个要求：

p {
    width : 12ex;
}

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

Answer 11

对于链接列表

其他答案提供了一些添加换行符的好方法，具体取决于具体情况。但应该注意的是: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中的空格如何，输出都是相同的（与pre相对应）
没有额外的填充添加到元素中（参见NickG的display:block评论）
您可以轻松地使用某些共享CSS在水平和垂直链接列表之间切换，而无需进入每个HTML文件进行样式更改
没有影响周围内容的float或clear个样式
该样式与内容分开（与 相对，或pre与硬编码中断）
这也适用于使用a.toc:after和<a class="toc">
您可以添加多个中断甚至前缀/后缀文本

Answer 12

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

我在display: flex的元素中，所以我不得不使用flex-direction: column。

Answer 13

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

Answer 14

<pre>代码怎么样？

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

Answer 15

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

p{
    padding-right: 50%;
}

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

Answer 16

使用 代替空格可以防止中断。

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

Answer 17

代码可以是

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

Answer 18

您需要在中声明内容。在它之后，行将被中断。

\A表示换行符。

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

Answer 19

我猜你不想使用断点，因为它总会破坏这条线。那是对的吗？如果是这样，如何在文本中添加断点 ，然后为其提供类似 的类，然后使用大小超过您想要它的大小的媒体查询来隐藏 所以它以特定宽度打破但保持在该宽度之上的内联。

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/

Answer 20

使用overflow-wrap：break-word;喜欢：

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

Answer 21

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

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

和css

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

Answer 22

适用于Chrome：

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

Answer 23

Vincent Robert和Joey Adams的回答都是有效的。但是，如果您不想更改标记，则只需使用javascript插入 即可。

如果不更改标记，则无法在CSS中执行此操作。

Answer 24

如果这有助于某人......

你可以这样做：

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

Answer 25

就我而言，我需要一个输入按钮才能在其前面换行。
我将以下样式应用于按钮，它可以工作：

clear:both;

Answer 26

别。如果你想要硬换行，请使用一个。

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

26 个答案:

正常使用`<br/>`，但在您不想要时将其隐藏`display: none`。

对于链接列表

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

26 个答案:

正常使用<br/>，但在您不想要时将其隐藏display: none。

对于链接列表

正常使用`<br/>`，但在您不想要时将其隐藏`display: none`。