停止自动换行分割单词

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: hide;} 会切断溢出，而 {overflow: auto;} 会导致溢出启用滚动。

Answer 6

对我来说，父项比单词小。添加会在空格上中断，但不会在单词上中断:

    word-break: initial;

Answer 7

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

我发现我需要以下 CSS 来实现此目的。

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

还要检查是否没有其他任何东西将

word-break

更改为

break-word

而不是

normal

。

Answer 8

要阻止单词中断，您应该取消设置

word-break

。默认值为

normal

，允许在断点处断字。

overflow-wrap

控制何时发生断词。

您应该将

overflow-wrap

属性设置为

always

，以便仅在单词太长而无法在一行中容纳时（而不是溢出）进行断行。

默认

normal

禁用分词，允许单词太长溢出元素的边缘。

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

break-word

。

属性

word-break

决定单词是只在断点处中断，还是始终（当它们可能溢出时）。

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

有关断字的信息

更多事情：

• 如果你想禁用all分词，即使它不能换行，即日文文本，你可以使用

  word-break: keep-all

• *值

  break-word

  可能不受支持，现已弃用，

  word-wrap

  CSS 属性也是如此（最初由 MS 添加用于此相同功能）。

Answer 9

使用

white-space: nowrap;

CSS 空白属性

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

这将解决它：

word-break: keep-all;

Answer 14

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

Answer 15

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

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