我想在第一行末尾用连字符打破长词。
预期的:
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
最佳答案
Chrome 显然不会进行断字(至少在 Windows 上)。使用其他浏览器或平台可能会更好。如果您事先知道要中断的位置,则可以使用 ­
(软连字符)。否则,至少在 Windows 上的 Chrome 中,当 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­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­TRUM</div>
另见 this answer 。
关于css用连字符断词,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42685806/