如何解决网页上的软连字符问题?在文本中可能有一些长词,您可能想要用连字符换行.但是你不希望连字符显示整个单词是否在同一行.
根据这个页面 <wbr>上的评论是由Netscape发明的非标准"标签汤".它似乎­ 也存在标准合规性方面的问题.似乎没有办法为所有浏览器提供有效的解决方案.
处理软连字符的方法是什么?为什么选择它?有优选的解决方案还是最佳实践?
假设我想在HTML表格单元格中显示此文本:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
Run Code Online (Sandbox Code Playgroud)
并且我希望该行在其中一个逗号之后优先打破.
有没有办法告诉HTML渲染器尝试在某个指定位置打破,并在尝试在其中一个空格之后断开之前先执行此操作,而不使用不间断空格?如果我使用不间断的空格,那么它会无条件地增大宽度.我希望换行符发生在其中一个空格之后,如果换行算法首先使用逗号尝试它并且无法使行适合.
我尝试在<span>元素中包装文本片段,但似乎没有做任何有用的事情.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span> …Run Code Online (Sandbox Code Playgroud)