如何禁用 CSS 中的断字?

问题描述 投票:0回答:4

如何在 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
的答案是正确的和/或重复的。

html css word-wrap
4个回答
15
投票

word-break: keep-all;
将保持单词完整。


3
投票

我也认为“空白”与“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/


0
投票

我不知道这在您的场景中是否有用,但它肯定会阻止单词制动:white-space: nowrap;


-2
投票

您的意思是:

.word {
    word-wrap: break-word;
}

来源:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

© www.soinside.com 2019 - 2024. All rights reserved.