CSS可以在元素中的每个单词之后强制换行吗？答案

【问题标题】：Can CSS force a line break after each word in an element?CSS可以在元素中的每个单词之后强制换行吗？
【发布时间】：2011-05-11 21:44:04
【问题描述】：

我正在建立一个多语言网站，所有者帮助我进行一些翻译。一些显示的短语需要换行以保持网站的风格。

不幸的是，店主不是电脑专家，所以如果他看到foo bar，他有可能会在翻译时以某种方式修改数据。

是否有 CSS 解决方案（除了更改宽度）来应用于每个单词后都会中断的元素？

（我知道我可以在 PHP 中做到这一点，但我想知道在 CSS 中是否有一个我不知道的巧妙技巧来完成同样的事情，也许在 CJK 功能中。）

编辑

我将尝试用图表说明发生了什么：

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

长词自动中断，短词不会。我希望它看起来像这样：

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

【问题讨论】：

在 HTML 中，当给定元素的宽度需要时，元素确实会在每个单词之后中断。你的意思是字里行间吗？
@Paul - 不，我需要一个不基于固定宽度的解决方案。问题是，有些短语较长并且会自动中断（就像您描述的那样），有些短语较短并且不会中断，因此呈现不一致。
@Paul - 是的，就像你描述的那样。并没有真正损害布局，但它可以看起来更好。
你可以使用单词间距，但它会影响所有单词。我认为你无法绕过将这些单词包装在 span 元素中。
@meo - 看起来像，谢谢你的想法

标签： css line-breaks

【解决方案1】：

我会试着解释一下： 是一个内联元素，我正在添加一个内联块来给元素一个宽度 max-width: min-content; min-content 是我们的文本/句子中最小单词的值/宽度。

编辑：如果您使用 min-content ，“宽度”将是您最长的单词。在本例中，example 是我们的长词。

但如果你有不同的词，比如“and if”或几个 2/3 字符的词，那么这些词将放在同一行。

如果您想保持 on word 行为，您可以给定一个固定宽度，例如 5px。

带有示例的代码笔：https://codepen.io/claudiuu/pen/WNpBNNQ

.wrapWord {
  display: inline-block;
  max-width: min-content;
}

<div>
  <span class="wrapWord">
   Example Word
  </span>
</div>

【讨论】：

虽然此代码可以回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将改善答案的长期价值。
请使用edit 按钮将解释移至您的答案。（然后删除评论）
这是对我有用的解决方案。独立的，与 flexbox 一起干净地工作。

【解决方案2】：

使用

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

其中<parent-width> 是父元素的宽度（或不适合一行的任意高值）。这样你就可以确定在一个字母之后甚至有一个换行符。适用于 Chrome/FF/Opera/IE7+（甚至可能是 IE6，因为它也支持字间距）。

【讨论】：

这绝对是最好的答案，恕我直言
@ToniMichelCaubet 答案真的很难解释，但他的意思是：.parent { word-spacing: 100px; } 其中100px 是父元素的宽度。问题是如果你有一个流动的父母，这个解决方案就不起作用。
只需为字间距设置一个非常高的值，例如word-spacing: 100000px，您就不必担心父母在宽度方面是流动的。将字间距设置为 100% 是有意义的（它将是父宽度的 100%），但该 css 属性不支持以百分比表示的值。
这很有帮助。我在响应式情况下使用它，在一个宽度下，我希望标签中的文本换行，因此它们的高度都相同：word-spacing: 2em;，而在移动宽度上，我希望它们是单行：word-spacing: unset;跨度>
这太棒了。从未来几年开始，非常感谢:)

【解决方案3】：

就我而言，

    word-break: break-all;

工作完美，希望对像我这样的其他新人有所帮助。

【讨论】：

我给了一个-1，因为这是一个不正确的答案。如果需要，这会在每个字符处换行。

【解决方案4】：

最好的解决方案是word-spacing 属性。

在具有特定大小的容器中添加（例如300px），然后必须将该大小添加为字间距中的值。

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

这样，你的句子总是会被打断并设置在一个列中，而段落的with会是动态的。

这里是一个例子 Codepen

【讨论】：

【解决方案5】：

我遇到了同样的问题，这里的任何选项都没有帮助我。某些邮件服务不支持指定的样式。这是我的版本，它解决了问题并且在我检查的任何地方都可以使用：

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

或者使用 CSS：

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

【讨论】：

【解决方案6】：

如果您希望能够从不同的解决方案中进行选择，除了给出的答案...

另一种方法是将容器的宽度设为 0 并确保溢出可见。然后每个单词都会溢出，并在自己的行中。

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

或者，您可以使用新提议的 width 值之一，前提是在您阅读本文时这些值仍然存在。

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

【讨论】：

诚实的最佳解决方案

【解决方案7】：

@HursVanBloob 给出的答案仅适用于固定宽度的父容器，但在流体宽度容器的情况下会失败。

我尝试了很多属性，但都没有按预期工作。最后我得出一个结论，给 word-spacing 一个非常大的价值 效果很好。

p { word-spacing: 9999999px; }

或者，对于现代浏览器，您可以使用 CSS vw 单位（以屏幕大小百分比表示的视觉宽度）。

p { word-spacing: 100vw; }

【讨论】：

这就是我会尝试的！
这是一个很好的解决方案！
完全打破不过。
好吧，这对我来说不起作用，这会使容器的流体宽度变得非常高。
@Onza 它不能那样工作。您需要为父包装器或内容包装器定义width。由于text-indent: long value;，文本修复正在工作，因此将您的下一个单词放在换行符上，但也使用了可用空间。您必须为它定义一个width-limit。很难找到您的场景的实际用途。如果你有width 那么为什么要中断文本。

【解决方案8】：

https://jsfiddle.net/bm3Lfcod/1/

对于那些寻求在灵活的父容器中工作的解决方案以及在两个维度上都灵活的子容器的人。例如。导航栏按钮。

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

【讨论】：

尝试将 span 提供给您可以提供的任何其他 CSS 属性。说一个可能导致browser reflow的属性
浏览器回流？

【解决方案9】：

在Separate sentence to one word per line 上描述了另一种解决方案，通过将display:table-caption; 应用于元素

【讨论】：

这实际上只是根据最长单词的宽度对单词进行分组。
虽然这可以将单词组合成一行，但它在很多情况下都非常有效，而且不像大字间距选项那样笨拙。
这是一款非常适合我的，不错的一款！
它没有给出任何结果

【解决方案10】：

您不能针对 CSS 中的每个单词。但是，使用一点 jQuery 可能就可以了。

使用 jQuery，您可以将每个单词包装在  中，然后 CSS 将 span 设置为 display:block，这会将其放在自己的行中。

当然是理论上的：P

【讨论】：

是的，我害怕那个。也可以在 PHP 中完成，但这似乎是一个丑陋的解决方案。我在想可能有一些 :first-child 诡计或其他东西......
@Steve：不，CSS 选择器目前只允许您选择 HTML 元素，而不是文本节点。我查看了the CSS 3 Text module，但似乎没有任何东西可以在元素中的每个单词之后强制中断。 Mark 的解决方案是您的最佳选择。
@Paul, @Mark - 如果你们中的任何一个想要代表，你可以回答，我会接受。我将根据meta.stackoverflow.com/questions/48013/… 将其标记为无法回答（暂时）。
我认为马克已经给出了答案，就我而言，所有的代表都是他的。
@Paul - +1 团队成员给这个家伙徽章或其他东西 :)

【解决方案11】：

尝试使用white-space: pre-line;。它会在代码中出现换行符的任何地方创建一个换行符，但会忽略额外的空格（制表符和空格等）。

首先，将你的话写在代码的不同行中：

<div>Short
Word</div>

然后将样式应用于包含单词的元素。

div { white-space: pre-line; }

请注意，但元素内代码中的每个换行符都会创建一个换行符。所以写以下内容会导致在第一个单词之前和最后一个单词之后有一个额外的换行符：

<div>
    Short
    Word
</div>

CSS Tricks 上有一篇很棒的文章解释了其他空白属性。

【讨论】：

您应该解释如何使用white-space 来回答问题。抱歉，我不知道怎么做。
CSS Tricks 上的文章已经充分解释了它，所以我认为一个链接就足够了，而不是试图在这里反刍答案。
好的，所以您建议在源代码中放置真正的换行符，并使用 CSS "white-space: pre;" 像 <pre> 标记一样显示这些换行符？这可以工作，并且换行符对翻译人员来说应该比  更自然。我将尝试编辑您的答案以添加它:)
没错。实际上，white-space: pre-line; 可能更合适，因为它会忽略代码中的额外空格。我会更新答案。
好，也许只为 IE 7 添加white-space: pre;。