logo标签列表

如何在CSS中进行换行，而不使用<br/>标签？

htmlcssline-breaks
527

如何在不使用<br>标签的情况下获得相同的输出？

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

输出:

你好
你怎么样
29个回答
7

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

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

链接列表

其他回答提供了一些很好的添加换行的方法，具体取决于情况。但应注意，: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's 的 display:block 评论）
  • 您可以轻松地在一些共享 CSS 下切换链接的横向和纵向列表，而无需进入每个 HTML 文件进行样式更改
  • 没有影响周围内容的 float 或 clear 样式
  • 样式与内容分离（与 <br/> 或带有硬编码断点的 pre 相比）
  • 这也适用于使用 a.toc:after 和 <a class="toc"> 的松散链接
  • 您可以添加多个断行甚至前缀/后缀文本
5
也许有人会遇到和我一样的问题：
我在一个具有 display: flex 属性的元素中，因此我必须使用 flex-direction: column。
5
我喜欢非常简单的解决方案，这里还有一个:
<p>hello <span>How are you</span></p>

以及CSS：

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

将 br 标签设置为 display:none 是有帮助的，但这样会导致单词连在一起。我发现用空格字符来替换它更有帮助，像这样：

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: ' ';}
}
2
你也可以考虑将 br 设置为 display: inline-block; width: 1em;，这样在水平方向上移动时就不会让单词连在一起了。 - Beejor
1
我更喜欢你的建议。下次遇到这种情况，我会尝试一下。 - Bryan
3
哦！我明白你的意思了。那么你在<pre>中使用空格来换行。如果你想要普通的空格呢？ - Micha Mazaheri
pre标签将解释其中的回车符。因此，如果您在pre标签中在“hello”和“how are you”之间断开行，换行符将被呈现。 - Godineau Félicie
3

代码可以是：

<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;
}
2021年，这应该是被接受的答案。这是最少的代码和最少的hacky方法。 - tfantina
2
你需要在<span class="class_name"></span>中声明内容。在此之后，文本将换行。 \A代表换行符。
.class_name::after {
  content: "\A";
  white-space: pre;
}
2
您可以添加大量填充并强制文本换行，例如：
p {
  padding-right: 50%;
}

在响应式设计的情况下，对我来说运作良好，只有在特定的宽度范围内需要拆分文本。
1
听起来是个好主意，但增加填充也会增加对象的总宽度。这可能会产生负面影响，特别是在响应式页面的情况下。 - itsols
1

在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上的所有其他选项:

插入换行符

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接