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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (14)

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

不幸的是,所有者并不是一个电脑爱好者,所以如果他看到foo<br />bar他翻译的时候有可能会修改数据。

是否有CSS解决方案(除了改变宽度)应用于每个单词之后会中断的元素?

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

编辑

我试着画出正在发生的事情:

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

长词自动断裂,短词不自动中断。我想让它看起来像这样:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------
提问于
用户回答回答于

使用

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

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

用户回答回答于

我尝试了很多属性,但都没有像预期的那样工作。最后我得出结论word-spacing有非常巨大的价值且效果很好。

p { word-spacing: 9999999px; }

或者,对于现代浏览器,可以使用css。vw单位(以屏幕大小%为单位的视觉宽度)。

p { word-spacing: 100vw; }

扫码关注云+社区