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

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

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

有没有CSS解决方案(除了改变宽度)应用到一个元素，这将打破每一个字?

(我知道我可以在PHP中做到这一点，但我想知道在CSS中是否有一个我不知道的漂亮的技巧来完成同样的事情，也许在CJK特性中。)

编辑

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

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

长字会自动断掉，短字不会。我想让它看起来像这样:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------
237736 次浏览
小开

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

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

理论上当然是P

小开
最佳答案

使用

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

小开

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

首先，在代码中把单词写在不同的行上:

<div>Short
Word</div>

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

div { white-space: pre-line; }

小心，元素内部代码中的每一个换行符都会创建一个换行符。所以写下面的句子会导致在第一个单词之前和最后一个单词之后多一个换行符:

<div>
Short
Word
</div>

有一篇关于CSS技巧的很棒的文章解释了其他空白属性。

小开

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

我尝试了很多属性，但没有一个像预期的那样工作。最后，我得出了一个结论，给出word-spacing是一个非常大的值完全没问题。

p { word-spacing: 9999999px; }

或者，对于现代浏览器，您可以使用CSS vw单位(可视宽度占屏幕大小的%)。

p { word-spacing: 100vw; }
小开

另一种解决方案在每个句子每行一个词中描述，即对元素应用display:table-caption;

小开

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

如果你想从不同的解决方案中进行选择，除了给出的答案之外……

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

小开
我也遇到过同样的问题，但这里的选项都帮不了我。某些邮件服务不支持指定的样式。 这是我的版本，它解决了问题，并在我检查的任何地方工作:

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

或使用CSS:

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

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

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

超文本标记语言

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

CSS

div {
width: 300px;
}


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

这样，你的句子就会被分解成一列，但是段落的结尾是动态的。

这里有一个例子 Codepen

小开

就我而言，

    word-break: break-all;

工作得很好，希望对其他像我一样的新人有所帮助。

小开

<span>是一个内联元素，我添加了一个display: inline-block来给元素max-width: min-content;一个宽度，min-content是你的文本/句子中最小单词的值/宽度。

如果你使用min-content， "width"将是你最长的单词。在这种情况下，Example是你的长单词。但如果你有不同的单词，如and if或少数2/3字符的单词，那么这些单词将适合在同一行。

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

在CodePen中查看更多示例。

.wrapWord {
display: inline-block;
max-width: min-content;
}
<div>
<span class="wrapWord">
Example Word
</span>
</div>

小开

我在一个项目中这样做，客户希望在不同的行上有3个单词的标题。基本上你用CSS增加空间，使用空白来分隔行。

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


提交答案