P粉7014918972023-08-26 10:07:02
CSS 3 包含一个“hyphens
”属性,可根据指定的 lang
属性设置连字符。但这只是一个工作草案,所以支持有点< a href="https://caniuse.com/#search=hyphens" rel="nofollow noreferrer">还没有。
您可以将其设置为
­
的地方断词,或者在 Firefox、Edge 甚至 IE 中都可以正常工作,但主要问题是 webkit 不支持“auto”值。除了在 Mac 和 Android 上,这是他们唯一接受的值。是的,这是一种奇怪的bug。
这是一个示例,如果您运行的是 windows / linux,请务必检查 Firefox 和 chrome 之间的区别。
p { width: 55px; border: 1px solid black; } p.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } p.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } p.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
<ul> <li><code>auto</code>: hyphen where the algorithm is deciding (if needed) <p lang="en" class="auto">An extremelyasdasd long English word</p> </li> <li><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed) <p lang="en" class="manual">An extreme­lyasd long English word</p> </li> <li><code>none</code>: no hyphen; overflow if needed <p lang="en" class="none">An extreme­lyasd long English word</p> </li> </ul>
针对 webkit 缺乏“自动”支持的常见解决方法是将 hyphens:auto 与 webkit 的 work-break:break-all
一起使用,因此文本将在支持它的浏览器上用连字符连接并且在 webkit 上不使用连字符换行。
P粉9501288192023-08-26 00:05:24
在长单词周围使用带有 display: inline-block
的容器。
body { margin-left: 30px; } div { border: solid 1px black; } .wide { border: solid 1px blue; width: 500px; } .narrow { border: solid 1px red; width: 360px; } h2 { font-family: 'Courier New'; font-weight: 400; font-size: 87px; } code { background-color: #eee; } .unbreakable {display:inline-block}
<p> <code>Super&shy;man</code> looks good in really narrow containers where the full word "Superman" would not fit</p> <p> <div class="narrow"><h2>Hi <span class="unbreakable">Super­man</span></h2></div> <p>And in this case the word "Superman" would fit unhypenhated on the second row.<br/> This uses the same code as the previous example</p> <div class="wide"><h2>Hi <span class="unbreakable">Super­man</span></h2></div>