CSS断字连字符 [英] css break word with hyphen

问题描述

我想在第一行的结尾用连字符打断长字.

I want to break the long word with the hyphen at the end of the first line.

预期:

BERUFSBILDUNGSZENT-
RUM

知道了:

BERUFSBILDUNGSZENT
RUM

这是我的html和CSS:

Here's my html and 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

推荐答案

Chrome显然不进行连字符(至少在Windows上如此).使用其他浏览器或平台可能会更好.如果您事先知道要在哪里中断，可以使用­(软连字符).否则，至少在Windows上的Chrome浏览器中，如果CSS断了一个长字，就无法获取连字符，除非它是从输入开始的.

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use ­ (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

.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>

另请参见此答案.

这篇关于CSS断字连字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！