CSS可以在元素中的每个单词之后强制换行吗?
我正在build立一个多语言的网站,业主帮我翻译一下。 一些显示的短语需要换行来保持网站的风格。
不幸的是,老板不是一个电脑人,所以如果他看到foo<br />bar
他有机会在翻译的时候以某种方式修改数据。
是否有一个CSS解决scheme(除了改变宽度)适用于每个单词后会破坏的元素?
(我知道我可以在PHP中做到这一点,但我想知道是否有一个漂亮的技巧,我不知道在CSS中完成同样的事情,也许在CJKfunction。
编辑
我会试图说明发生了什么事情:
---------------- ---------------- | Short Word | | Gargantuan | | | | Word | ---------------- ----------------
长词自动断,短词不。 我希望它看起来像这样:
---------------- ---------------- | Short | | Gargantuan | | Word | | Word | ---------------- ----------------
使用
.one-word-per-line { word-spacing: <parent-width>; }
其中<parent-width>
是父元素的宽度(或不适合一行的任意高值)。 这样你就可以确定单个字母后面还有一个换行符。 适用于Chrome / FF / Opera / IE7 +(甚至可能是IE6,因为它也支持字间距)。
@HursVanBloob给出的答案只适用于固定宽度的父容器,但在stream体宽度容器的情况下失败 。
我尝试了很多属性,但没有按预期工作。 最后我得出的结论是,给word-spacing
一个非常巨大的价值完全正常。
p { word-spacing: 9999999px; }
或者,对于现代浏览器,您可以使用CSS vw
单位(可视宽度,以屏幕大小的百分比表示)。
p { word-spacing: 100vw; }
尝试使用white-space: pre-line;
。 它会在代码中出现换行符时创build换行符,但会忽略多余的空格(制表符和空格等)。
首先,在你的代码中分别写上你的单词:
<div>Short Word</div>
然后将样式应用于包含单词的元素。
div { white-space: pre-line; }
但要小心 ,元素内的代码中的每一行中断都会创build一个换行符。 所以编写以下内容会导致在第一个单词之前和最后一个单词之后出现额外的换行符:
<div> Short Word </div>
有关CSS技巧的一篇很棒的文章解释了其他的空白属性。
另一种解决scheme是通过应用display:table-caption;
将单独的句子描述为每行一个单词 display:table-caption;
元素
你不能在CSS中定位每个单词。 但是,你可能可以使用一些jQuery。
使用jQuery,你可以将每个单词放在一个<span>
,然后将CSS设置为display:block
,它将把它放在一行中。
理论当然:P
https://jsfiddle.net/bm3Lfcod/1/
对于那些寻求解决scheme,在灵活的父容器和灵活的两个维度的孩子。 例如。 导航栏button。
//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; }