Question

我正在建立一个多语言网站，主人帮我翻译。一些显示的短语需要换行符以维护网站的样式。

不幸的是，所有者不是计算机人员，所以如果他看到foo<br />bar，他就有可能在他翻译时以某种方式修改数据。

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

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

修改

我将尝试绘制正在发生的事情：

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

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

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

Answer 1

使用

.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，因为它也支持字间距）。

Answer 2

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

我尝试了很多属性，但没有按预期工作。最后我得出结论，给予 word-spacing非常大的价值非常合适。

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

Answer 3

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

首先，在代码中的单独行中写下您的文字：

<div>Short
Word</div>

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

div { white-space: pre-line; }

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

<div>
    Short
    Word
</div>

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

Answer 4

通过将display:table-caption;应用于元素

，在Separate sentence to one word per line上描述了替代解决方案

Answer 5

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

另一种方法是给容器宽度为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 6

您无法定位CSS中的每个单词。但是，您可能会使用jQuery。

使用jQuery，你可以将每个单词包装在<span>中，然后将CSS设置为display:block，这样就可以将它放在自己的行上。

理论当然是：P

Answer 7

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

将<p>添加到具有特定大小（例如300px）的容器中，然后必须将该大小添加为单词间距中的值。

HTML

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

CSS

div {
 width: 300px;
}

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

这样，您的句子将始终被打断并设置在列中，但是段落的with将是动态的。

这里有一个例子 Codepen

Answer 8

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

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

validate_image

Answer 9

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

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

或使用CSS：

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

Answer 10

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

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

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

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

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

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

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

Answer 11

就我而言，

    word-break: break-all;

努力工作，希望它对像我这样的其他新手有帮助。

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

11 个答案: