CSS如何在连字符处断开单词

Question

CSS如何在连字符处断开单词

29

我想在第一行的末尾用连字符断开长单词。

BERUFSBILDUNGSZENT-
RUM

得到了这个：

BERUFSBILDUNGSZENT
RUM

这是我的 HTML 和 CSS 代码：

<div class="content">BERUFSBILDUNGSZENTRUM</div>

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

您可以查看我的JSFiddle。

- Lee

1

你是指连字符吗？ - Angela Amarapala

我已经设置了连字符自动 CSS，但没有效果。 - Lee

那么真的没有办法做到这一点吗？我无法决定在哪里断开单词，因为它是来自用户的数据，而且他们经常更改。 - Lee

做到这一点的方法是使用连字符库。 - user663031

3个回答

21

Chrome 显然不支持断字（至少在 Windows 上是这样）。您可以尝试其他浏览器或平台。如果您事先知道要在哪里断字，可以使用 （软连字符）。否则，在 Chrome 的 Windows 版本中，除非长单词的连字符在输入时就存在，否则无法通过 CSS 断开长单词并插入连字符。

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

Using soft hyphen:
<div class="content">BERUFSBILDUNGSZEN&shy;TRUM</div>    

Using automatic hyphenation (doesn't work in Chrome)
<div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div>

Soft hyphen not displayed if it doesn't break there
<div class="content" style="width: 400px; ">BERUFSBILDUNGSZEN&shy;TRUM</div>

另请参阅此答案。

- user663031

是的，它可以在Firefox上运行，但无法在Chrome上运行。谢谢。 - Lee

值得考虑使用JS库在您的页面中获取此功能。其中一个可以考虑的是http://mnater.github.io/Hyphenator/，它可以简单或深入地使用。由于目前没有纯CSS解决方案，请务必考虑使用此功能。 - pattyd

5

值得注意的是，这个例子只有在Firefox中存在lang属性时才能正常工作。大多数例子往往会忽视这一点，但这非常重要。 - Mr Lister

4

对我来说，lang="en"无法工作，只有使用"de"才可以，尽管我的文本是用英语编写的。 - pedrotester

-1

在您的HTML标签中添加lang="de"属性，因为浏览器使用一个基于该语言标签决定的算法来确定页面的语言。

- evayly

6

你显然没有在fiddle上测试过这个答案，添加一个语言集不会解决这个特定的问题。此外，你的“答案”更适合作为评论中的建议，以查看它是否能够引导到原始帖子的解决方案或下一步解决方案。 - pattyd

这可能是解决方案的一部分，也可能不是。某些支持自动断字的浏览器可能需要它。另一方面，在其他浏览器中可能不需要它。如果浏览器本来就不支持断字，那么这没有任何影响。 - user663031

应该理解问题。然后针对相关问题更新您的答案。@evayly - Bipon Biswas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maku · Accepted Answer

2022年的解决方案:

如果你给你的div添加lang属性，并按照正常情况输入"Berufsbildungszentrum"，使用hyphens:auto;就可以实现预期效果。然后，你可以使用text-transform: uppercase;再次将单词转换为大写。

请注意，连字号支持的字典因浏览器而异。可以在此处查看兼容性表格。

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  border: solid 1px #000;
}

<div lang="de" class="content">Berufsbildungszentrum</div>

同时也要检查更新的JSFiddle