如何在 CSS 中换行时禁用将单词分成几部分?例如,目前,如果它没有空格,它会按以下方式写入单词“impossible”:
I think it is not im-
possible
我想写
I think it is not
impossible
即将整个单词“impossible”包装到下一行,而不仅仅是其中的一部分。
我不想更改文本对齐方式。
更新
此处提出的答案:停止自动换行分割单词看起来不合理或棘手,因为
white-space
属性没有可能的wrap
值,此处描述http://www.w3schools.com/cssref/pr_text_white-空间.asp
此外,
white-space
的整体主题有所不同,被描述为“指定如何处理元素内的空白”(请参阅上面的链接)。
所以,我不能认为关于
white-space
的答案是正确的和/或重复的。
word-break: keep-all;
将保持单词完整。
我也认为“空白”与“nowrap”或“pre”的解决方案是错误的,它没有做正确的行为。 文本应该断行,但不能断词。这是由一些 css 属性引起的:word-wrap、overflow-wrap、word-break、hyphens。所以你可以选择:
word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
删除它们,或用“未设置”或“正常”覆盖它们:
word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;
JSfiddle 提供:https://jsfiddle.net/azozp8rr/
我不知道这在您的场景中是否有用,但它肯定会阻止单词制动:white-space: nowrap;
您的意思是:
.word {
word-wrap: break-word;
}
来源:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap