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

Question

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

不幸的是，所有者不是计算机专家，因此如果他看到 foo
gt;bar，他就有可能在翻译时以某种方式修改数据。

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

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

编辑

我我会尝试用图表来说明正在发生的事情：

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

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

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

Answer 1

您无法针对 CSS 中的每个单词。不过，只要使用一点 jQuery，您也许就可以做到。

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

当然是理论上的：P

Answer 2

我在一个项目中这样做了，客户希望将 3 个词的标题放在不同的行上。基本上，您可以使用 CSS 增加空格，并使用空格来分隔行。

    word-spacing:9999px;
    white-space: pre-line;

Answer 3

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

Answer 4

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

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

或使用 CSS：

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

Answer 5

如果您可以在每个单词周围添加标记（例如 span），那么您可以使用 CSS 在每个单词后面插入换行符。

请注意，我们插入的“内容”是 \a，它是十进制 10 的十六进制，即换行符。

.break-after-each-word > .word::after {
  content: "\a";
  white-space: pre;
}

<div class="break-after-each-word">
  <span class="word">Foo</span>
  <span class="word">Bar</span>
  <span class="word">Baz</span>
</div>

Answer 6

TL;DR：拆分单词并使用
标签将它们连接起来。

注1：这是一个非CSS替代解决方案。

注2：这是针对我自己的具体问题的，它工作得很好，我也接受缺点；即需要更多的计算能力，添加 JavaScript 并在每个单词之间添加额外的
标签。同样，这在我的 React.js 项目中运行良好，我想我会分享它，以防有人发现它有用。

// @ts-nocheck
const HeadingCell = ({cell}) => {
  const splitHeading = (heading) => {
    const words = heading.split(' ')
    const joinedWords = words.join('<br>')
    return joinedWords
  }

  return <span dangerouslySetInnerHTML={{__html: splitHeading(cell.data.heading)}}></span>
}

export default HeadingCell

Answer 7

就我而言，

    word-break: break-all;

效果很好，希望它能帮助像我这样的其他新手。

Answer 8

使用

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

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

Answer 9

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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

Answer 10

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

首先，将您的单词写在代码中的单独行上：

<div>Short
Word</div>

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

div { white-space: pre-line; }

请小心，元素内代码中的每个换行符都会创建一个换行符。因此，编写以下内容将导致第一个单词之前和最后一个单词之后出现额外的换行符：

<div>
    Short
    Word
</div>

有一篇关于 CSS 技巧 解释其他空白属性。

Answer 11

将句子每行一个单词中描述了一种替代解决方案，通过将 display:table-caption; 应用于元素

Answer 12

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

另一种方法是将容器的宽度设置为 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>

Answer 13

是一个内联元素，我添加一个 display: inline-block 来为元素提供宽度 max-width: min-content ;, min-content 是文本/句子中最小单词的值/宽度。

如果您使用 min-content，“宽度”将是最长的单词。在这种情况下，Example 是您的较长单词。但是，如果您有不同的单词，例如 和 if 或几个 2/3 字符的单词，那么这些单词将适合在同一行上。

如果您想保持文字行为，您可以指定固定宽度，例如 5px。

在 CodePen 中查看更多示例。

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

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

Answer 14

最好的解决方案是 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