停止自动换行分割单词

Question

body { word-wrap: break-word;}

我一直在使用该代码（上面）将 body 中的文本放入其容器中。然而我不喜欢它的是它破坏了文字。

是否还有另一种方法，它不会分解单词，而只会在单词之后或之前换行？

编辑：这是在 UIWebView 中使用。

Answer 1

使用white-space: nowrap;。如果您在要设置的元素上设置了宽度，那么它应该可以工作。

更新 -
在 Firefox 中渲染数据

Answer 2

我遇到了同样的问题，我使用以下 css 解决了它：

.className {
  white-space:pre-wrap;
  word-break:break-word;
}

Answer 3

请使用 nowrap 并且换行值不适合我。 nowrap 解决了这个问题。

white-space: nowrap;

Answer 4

可能有点晚了，但你可以添加这个 css 来阻止断词：

.element {
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
}

Answer 5

你可以试试这个...

body{
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

{word-wrap:;} 是 IE 专有属性，而不是 css 的一部分。 firefox的处理是正确的。不幸的是，FF 不支持软连字符 / 。所以这不是一个选择。您可以分别插入头发或细空格 / （在数字实体上检查我）和 / 。

设置{overflow:hidden;}会切断溢出，而{overflow:auto;}会导致溢出启用滚动。

Answer 6

对我来说，父母比这个词更小。添加会在空格上中断，但不会在单词上中断：

    word-break: initial;

Answer 7

要阻止断词，您应该取消设置断词。默认值为正常，允许在断点处断字。

overflow-wrap 控制何时发生断词。

您应该将 overflow-wrap 属性设置为 always，以便仅当单词太长而无法在一行中容纳时（而不是溢出）才中断单词。

默认的 normal 禁用断字，允许单词太长溢出元素的边缘。

如果您的元素宽度是灵活的（例如 min-width 或 display:flex），并且您希望展开元素而不是换行，则可以使用值 break-word。

属性 word-break 确定单词是只在断点处中断，还是始终（当它们可能溢出时）。

有关溢出换行的有用信息和演示 - MDN Web 文档

有关分词的信息

更多内容：

• 如果您想禁用所有分词，即使它不能换行，即日文文本，您可以使用word-break: keep-all
• *值 break-word 可能不受支持，现已弃用，word-wrap CSS 属性也是如此（最初由 MS 添加用于相同的功能） ）。

Answer 8

在我的情况下，我试图确保表格单元格内的单词在正确的断字处换行。

我发现我需要以下 CSS 来实现这一点。

table {
  table-layout:fixed;
}
td {
  white-space: wrap;
}

还要检查是否没有其他任何东西将 word-break 更改为 break-word 而不是 normal。

Answer 9

使用 white-space: nowrap;

CSS white-space 属性

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

了解有关空白示例的更多信息

Answer 10

Firefox 浏览器上的断字问题。所以你可以使用来防止断词：

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;

Answer 11

我在我们的网站上使用此代码来阻止断词：

body {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

Answer 12

.className {
    hyphens: none;
    word-break: keep-all;
}

Answer 13

对我有用的是将 overflow-wrap 设置为普通的：

overflow-wrap: normal;

Answer 14

    word-wrap: normal;

那对我来说是这样的。不再需要中途中断到下一行。

Answer 15

我在网格结构中遇到了类似的问题，我使用了，word-break：break-word;
在我的网格中，我的问题得到了解决。

Answer 16

这对我使用旧的 Webkit 有帮助 - 这个来自 phantomjs 2.1

.table td {
    overflow-wrap: break-spaces;
    word-break: normal;
}