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

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

通过应用于元素,在每个行的单独句子上描述了另一种解决方案display:table-caption;

Answer 4

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

首先,在代码中的单独行中写下您的单词:

<div>Short
Word</div>

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

div { white-space: pre-line; }

但要小心,元素内部代码中的每个换行符都会产生换行符.因此,编写以下内容将导致在第一个单词之前和最后一个单词之后额外换行:

<div>
    Short
    Word
</div>

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

Answer 5

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

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

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

在CodePen中查看更多示例。

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

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

Answer 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>

Answer 7

最好的解决方案是word-spacing房产。

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

超文本标记语言

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

CSS

div {
 width: 300px;
}

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

这样，你的句子将始终被分解并设置在一个列中，但段落的with将是动态的。

这是一个 Codepen示例

Answer 8

你不能在 CSS 中定位每个单词。但是，使用一些 jQuery 您可能可以。

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

当然理论上：P