如何在不使用
的情况下从 css 换行？

发布于 2024-08-29 22:34:57 字数 250 浏览 12 评论 0原文

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

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

输出：

hello
How are you

原文

How to achieve same output without  ?

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

output:

hello
How are you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少钕鈤記 2024-09-05 22:34:57

您可以使用 white-space: pre; 使元素的行为类似于

，它保留换行符。例子：

p {
  white-space: pre;
}

<p>hello 
How are you</p>

You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

回复收藏 0 原文

花辞树 2024-09-05 22:34:57

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

我建议使用 span ，然后将其显示为块（实际上就像

一样）。

p span {
  display: block;
}

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

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.

I suggest using spans that you will then display as blocks (just like a <div> actually).

p span {
  display: block;
}

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

回复收藏 0 原文

空‖城人不在 2024-09-05 22:34:57

正常使用，但用 `display: none` 隐藏它

我希望大多数发现这个问题的人都希望使用响应式设计来决定是否使用换行符出现在特定位置。

虽然不是很明显，但您可以将 display:none 应用于以隐藏它。

br { display: none; }

这意味着您可以像使用任何其他 CSS 一样使用媒体查询。

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@media screen and (min-width: 20em) {
  br {
    /* hide the BR tag for wider screens (i.e. no line break) */
    display: none; 
  }
}

如果您需要根据屏幕宽度在不同位置强制换行，这会很有用。当然，如果您想始终防止特定位置发生换行，您也可以使用。

jsfiddle 示例

Use ` ` as normal, but hide it with `display: none`

I would expect most people finding this question are looking to use responsive design to decide whether or not a line-break appears in a specific place.

While not immediately obvious, you can apply display:none to a   in order to hide it.

br { display: none; }

This means you can use media queries just as you would for any other css.

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@media screen and (min-width: 20em) {
  br {
    /* hide the BR tag for wider screens (i.e. no line break) */
    display: none; 
  }
}

This can be useful if you need to force a line break in a different place based on the screen width. And of course you can also use if you want to always prevent a line break from happening in a specific place.

jsfiddle example

回复收藏 0 原文

烟雨凡馨 2024-09-05 22:34:57

有多个选项可用于定义空格和换行符的处理。
如果可以将内容放入

标签中，那么就很容易获得想要的任何内容。

为了保留换行符而不是空格，请使用 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 学校

There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a  tag it is pretty easy to get whatever one wants.

For preserving line breaks but not white spaces use pre-line (not pre) like in:

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

<p>hello
How are you</p>

If another behavior is wanted choose among one of these (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

回复收藏 0 原文

一影成城 2024-09-05 22:34:57

CSS 中的"\a" 命令生成回车符。这是 CSS，而不是 HTML，因此它应该更接近您想要的：没有额外的标记。

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

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

The "\a" command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.

In a blockquote, the example below displays both the title and the source link and separate the two with a carriage return ("\a"):

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

回复收藏 0 原文

扶醉桌前 2024-09-05 22:34:57

在 CSS 中使用代码

p {
  white-space: pre-line;
}

使用此 CSS，P 标记内的每个输入都将成为 HTML 中的断线。

In the CSS use the code

p {
  white-space: pre-line;
}

With this CSS every enter inside the P tag will be a break-line at the HTML.

回复收藏 0 原文

初熏 2024-09-05 22:34:57

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

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

Building on what has been said before, this is a pure CSS solution that works.

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

回复收藏 0 原文

地狱即天堂 2024-09-05 22:34:57

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

display:block;

块级元素之后的非浮动元素将出现在下一行。许多元素，例如

和

已经是块级元素，因此您可以使用它们。

虽然知道这一点很好，但这实际上更多地取决于您的内容的上下文。在您的示例中，您不想使用 CSS 强制换行。
>是合适的，因为从语义上来说，p 标签最适合您正在显示的文本。仅仅为了挂起 CSS 而添加更多标记是不必要的。从技术上讲，它不完全是一个段落，但是没有<问候语>。标签，所以使用你拥有的。使用 HTMl 很好地描述您的内容更为重要 - 在您完成这些之后，然后想办法让它看起来更漂亮。

回复收藏 0 原文

So要识趣 2024-09-05 22:34:57

<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

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

source: https://stackoverflow.com/a/36191199/2377343

回复收藏 0 原文

<逆流佳人身旁 2024-09-05 22:34:57

这是一个糟糕问题的糟糕解决方案，但确实符合要点：

p {
    width : 12ex;
}

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

Here's a bad solution to a bad question, but one that literally meets the brief:

p {
    width : 12ex;
}

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

回复收藏 0 原文

不乱于心 2024-09-05 22:34:57

使用 overflow-wrap:break-word; 如下：

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

Use overflow-wrap: break-word; like:

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

回复收藏 0 原文

我的黑色迷你裙 2024-09-05 22:34:57

也许有人会遇到和我一样的问题：

我在一个带有 display: flex 的元素中，所以我必须使用 flex-direction: column。

回复收藏 0 原文

满地尘埃落定 2024-09-05 22:34:57

对于链接列表

其他答案提供了一些根据情况添加换行符的好方法。但应该注意的是， :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 和
您可以添加多个分隔符，甚至添加前缀/后缀文本

For a List of Links

The other answers provide some good ways of adding line breaks, depending on the situation. But it should be noted that the :after selector is one of the better ways to do this for CSS control over lists of links (and similar things), for reasons noted below.

Here's an example, assuming a table of contents:

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

And here's Simon_Weaver's technique, which is simpler and more compatible. It doesn't separate style and content as much, requires more code, and there may be cases where you want to add breaks after the fact. Still a great solution though, especially for older 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>

Note the advantages of the above solutions:

No matter the whitespace in the HTML, the output is the same (vs. pre)
No extra padding is added to the elements (see NickG's display:block comments)
You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change
No float or clear styles affecting surrounding content
The style is separate from the content (vs.  , or pre with hard-coded breaks)
This can also work for loose links using a.toc:after and <a class="toc">
You can add multiple breaks and even prefix/suffix text

回复收藏 0 原文

┾廆蒐ゝ 2024-09-05 22:34:57

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

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

和 CSS：

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

I like very simple solutions, here is one more:

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

and CSS:

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

回复收藏 0 原文

梦与时光遇 2024-09-05 22:34:57

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

Setting a br tag to display: none is helpful, but then you can end up with WordsRunTogether. I've found it more helpful to instead replace it with a space character, like so:

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

回复收藏 0 原文

樱桃奶球 2024-09-05 22:34:57

 标签怎么样？

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

回复收藏 0 原文

世界和平 2024-09-05 22:34:57

代码可以是：

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

The code can be:

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

CSS would be:

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

回复收藏 0 原文

七秒鱼° 2024-09-05 22:34:57

您需要在中声明内容。之后线路将被打破。

\A 表示换行符。

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

You need to declare the content within . After it the line will be break.

\A means line feed character.

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

回复收藏 0 原文

南…巷孤猫 2024-09-05 22:34:57

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

p {
  padding-right: 50%;
}

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

You can add a lot of padding and force text to be split to new line, for example

p {
  padding-right: 50%;
}

Worked fine for me in a situation with responsive design, where only within a certain width range it was needed for text to be split.

回复收藏 0 原文

指尖上得阳光 2024-09-05 22:34:57

一个现代而简单的解决方案可以设置宽度，如下所示：

width: min-content;

此 CSS 规则对文本内容最有用，但不仅限于：
https://developer.mozilla.org/en-US/文档/Web/CSS/min-content

p {
  margin: 20px;
  color: #222;
  font-family:'Century Gothic', sans-serif;
  border: 2px dotted grey;
  padding: 3px;
}

.max {
  width: max-content;
}

.min {
  width: min-content;
}

<!DOCTYPE html>
<html lang="en">
  <head />
  <body>
    <p class="max"> Max width available </p>
    <p class="min"> Min width available </p>
  </body>
</html>

A modern and simple solution could be setting the width like that:

width: min-content;

This CSS rule is mostly useful for text content, but not only:
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

p {
  margin: 20px;
  color: #222;
  font-family:'Century Gothic', sans-serif;
  border: 2px dotted grey;
  padding: 3px;
}

.max {
  width: max-content;
}

.min {
  width: min-content;
}

<!DOCTYPE html>
<html lang="en">
  <head />
  <body>
    <p class="max"> Max width available </p>
    <p class="min"> Min width available </p>
  </body>
</html>

回复收藏 0 原文

千鲤 2024-09-05 22:34:57

使用 空白 对于没有空格的长句子不起作用，例如 HiHowAreYouHopeYouAreDoingGood...etc 来解决此问题使用 word-wrap:break-word; 来代替

它是为了允许长单词能够断行并换行到下一行。，它由 Facebook 使用，Instagram 和我

Using white-space will not work for long sentences without spaces like HiHowAreYouHopeYouAreDoingGood...etc to fix this consider using word-wrap: break-word; instead

it's made to allow long words to be able to break and wrap onto the next line., its used by Facebook, Instagram and me ????

Example

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

回复收藏 0 原文

没有伤那来痛 2024-09-05 22:34:57

在 CSS-tricks 上，Chris Coyier 进行了很多测试选项，最后一个非常简洁的选项是使用 display:table，每个选项都有自己的问题，当您在跨度上使用 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 上的所有其他选项：

注入换行符

On CSS-tricks, Chris Coyier have tested lots of options and the final and pretty neat one was using display:table, Each one have their own problems which you will find out when you use background-color on the span!

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>

Here You can see all other options on codepen:

Injecting a Line Break

回复收藏 0 原文

梦途 2024-09-05 22:34:57

文森特·罗伯特和乔伊·亚当斯的答案都是有效的。但是，如果您不想更改标记，则只需使用 JavaScript 插入即可。

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

回复收藏 0 原文

守望孤独 2024-09-05 22:34:57

就我而言，我需要一个输入按钮在其前面有一个换行符。
我将以下样式应用于按钮并且它起作用了：

clear:both;

In my case, I needed an input button to have a line break before it.
I applied the following style to the button and it worked:

clear:both;

回复收藏 0 原文

街角迷惘 2024-09-05 22:34:57

如果这对某人有帮助......

你可以这样做：

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

In case this helps someone...

You could do this:

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

With this css:

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

回复收藏 0 原文

蓝眼泪 2024-09-05 22:34:57

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

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

Using instead of spaces will prevent a break.

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

回复收藏 0 原文

你是年少的欢喜 2024-09-05 22:34:57

我猜您不想使用断点，因为它总是会断线。这是正确的吗？如果是这样，如何在文本中添加断点，然后给它一个类似的类，然后使用媒体查询位于您希望其中断的大小的正上方以隐藏，因此它会在特定宽度处中断，但保持内联于该宽度之上。

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/

I'm guessing you did not want to use a breakpoint because it will always break the line. Is that correct? If so how about adding a breakpoint   in your text, then giving it a class like   then using media query right above the size you want it to break to hide the   so it breaks at a specific width but stays inline above that width.

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/

回复收藏 0 原文

呆橘 2024-09-05 22:34:57

这在 Chrome 中有效：

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

This works in Chrome:

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

回复收藏 0 原文

呆萌少年 2024-09-05 22:34:57

简单的解决方案。
将外部段落类命名为“父级”，将内部段落命名为“子级”。

设置 css 属性

父级： margin-bottom: 0;

child: margin-top: 0;

一切顺利。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Solve</title>
  <style>
    .parent {
      margin-bottom: 0;
    }
    
    .child {
      margin-top: 0;
    }
  </style>
</head>

<body>
  <p class="parent"> hello
    <p class="child">How are you</p>
  </p>
</body>

</html>

Simple easy solution.
Name th external paragraph class as 'parent' and internal paragraph as 'child'.

Set css property

parent: margin-bottom: 0;

child: margin-top: 0;

You are good to go.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Solve</title>
  <style>
    .parent {
      margin-bottom: 0;
    }
    
    .child {
      margin-top: 0;
    }
  </style>
</head>

<body>
  <p class="parent"> hello
    <p class="child">How are you</p>
  </p>
</body>

</html>

回复收藏 0 原文

~没有更多了~