logo标签列表

停止文本自动换行分割单词。

cssuiwebviewword-wrap
89
body { word-wrap: break-word;}

我一直使用上述代码来将文本适配到其容器中的body。然而，我不喜欢它会将单词分开的情况。

是否有其他方法可以在单词之后或之前仅进行换行而不是打断单词？

编辑：这是用于UIWebView内部的。

6
你认为“break-word”是什么意思？ - Josh Stodola
1
我知道那个，但我说“还有其他方法吗”。 - Joshua
遗憾的是，word-wrap: normal; 也无济于事。如果您正在尝试在表格单元格中换行单词（我的情况），仅使用 white-space: wrap; 也无法解决问题。 - Dave Sag
14个回答
93

使用 white-space: nowrap;。如果您在设置此属性的元素上设置了宽度，则它应该起作用。

更新 - 在 Firefox 中呈现的数据 alt text

1
不行，还是没有效果。这段代码仍然显示带有水平滚动条的完整文本。body { width: 768px; white-space: wrap;} - Joshua
6
wrap是无效的属性值。 - Claudiu Creanga
6
这不应该是正确的答案，“white-space: wrap;” 不是一个有效的属性值。 - user1486133
7
实际上是 white-space: nowrap。 - AlexioVay
1
1: 这个不起作用。 2: 糟糕的截图 - 如果这是质量的话，下次就别费心了。更好的方法是：下次只需发布一个 jsfiddle 或在线调试器即可。这将向您（以及其他人）展示此操作并不像您描述的那样有效。这是一个不起作用的示例：https://jsfiddle.net/9dfpyvxk/ -> 您真的认为调整“全局”BODY WIDTH是解决此问题的可行方法吗？BODY WIDTH会影响整个页面。 - B. Shea
显示剩余4条评论
30

我曾经遇到了同样的问题，我使用下面的 CSS 解决了它：

.className {
  white-space:pre-wrap;
  word-break:break-word;
}
3
第三个答案才是真正回答问题的那个。接受和第二个答案都会导致文本无法换行。 - undefined
29

请使用nowrap属性，wrap值对我没有效果。使用nowrap解决了问题。

white-space: nowrap;
32
这会防止单词换行，但也会防止整行文字换行。 - heytricia
27

可能有点晚了，但您可以添加此CSS以防止单词断开：

.element {
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
}
7
您可以尝试这个...
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不支持软连字 / 。所以这不是一个选项。您可能可以插入一个hair或thin空格， / （请检查我在数值实体上）和 /  ，分别。

将{overflow: hidden;}设置为剪切溢出，并且{overflow: auto;}会导致溢出启用滚动。

你给我的所有例子都没有实际起作用，唯一一个能起作用的是 word-wrap。 - Joshua
另外还有 {overflow: hidden;} 和 {overflow: auto;} 两种选择，但这也存在问题。 - Pramendra Gupta
是的，但这不是我要找的，因为 overflow: hidden; 会隐藏掉边缘处的所有内容。 :/ - Joshua
这并没有回答问题 - 问题是如何防止单词断开。 - heytricia
5

对我而言，父元素比字小。添加将在空格处断开，但不会在单词处断开：

    word-break: initial;
2
在我的情况下，我正在尝试确保单词在表格单元格内正确换行。
我发现我需要以下CSS才能实现这一点。
table {
  table-layout:fixed;
}
td {
  white-space: wrap;
}

同时还要检查是否有其他内容将word-break更改为break-word而不是normal。

1
1
为了防止单词断开，您应该取消设置word-break。默认值为normal，允许单词在断点处断开。 overflow-wrap控制单词断开的时间。

相反，您应该将overflow-wrap属性设置为always，仅在单词太长无法适合一行时才断开（而不是溢出）。

默认值normal禁用单词断开，允许过长的单词溢出元素边缘。
如果您的元素宽度是灵活的（例如min-width或display:flex），并且您想要扩展元素而不是换行，则可以使用值break-word。
属性word-break确定单词是否只应在断点处断开，还是始终断开（当它们可能溢出时）。

有关overflow-wrap的有用信息和演示-MDN Web Docs

有关word-break的信息

更多内容：

  • 如果您想禁用所有单词换行，即使它不能换行，例如日语文本，您可以使用word-break: keep-all
  • *值break-word可能已经不被支持并且现在已弃用，同样功能的word-wrap CSS属性也是如此（最初由 MS 添加）。
1
我使用以下代码来防止我们网站上的单词被分开显示：
body {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接