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

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

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

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

EDIT

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

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

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

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

当前回答

就我而言,

    word-break: break-all;

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

其他回答

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

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

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

<div>Short
Word</div>

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

div { white-space: pre-line; }

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

<div>
    Short
    Word
</div>

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

Use

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

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

词间距:9999 px; 空白:pre-line;

最好的解决方案是字间距属性。

将<p>添加到一个特定大小的容器中(例如300px),然后在word-spacing中添加该大小的值。

HTML

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

CSS

div {
 width: 300px;
}

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

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

这里有一个Codepen的例子