连字符后不换行
我希望在与所有浏览器兼容的情况下，防止在连字符-之后换行。
示例：
我有这个文本：3-3/8"，它在HTML语言中是这样的：3-3/8”
问题是，在行尾附近，由于连字符，它会中断并换行到下一行，而不是将其视为一个完整的单词……
3-
3/8"我试过插入“零宽度不换行字符”，没有成功...
3-3/8”我在Safari中看到了这一点，并认为它在所有浏览器中都是一样的。
以下是我的doctype和字符编码...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />有什么方法可以防止它们在连字符后换行吗？我不需要任何解决方案，适用于整个页面…只是一些我可以根据需要插入的东西，比如“零宽度不换行字符”，除了一个可以工作的字符。
这是一个演示。只需使框架变窄，直到连字符处的行断开。
http://jsfiddle.net/RagKH/
回答 6
Stack Overflow用户
发布于 2011-10-08 02:48:44
尝试使用不间断的连字符‑。我已经用你的jsfiddle中的那个字符替换了破折号，把框架缩小到尽可能小，然后线条就不再分割了。
Stack Overflow用户
发布于 2012-09-11 11:23:45
您还可以使用以下命令对相关文本进行换行
<span style="white-space: nowrap;"></span>Stack Overflow用户
发布于 2012-12-07 01:44:03
IE8/9使CanSpice的答案中提到的不间断连字符比典型的连字符更长。它是短划线的长度，而不是典型的连字符。这种显示差异对我来说是一个破坏交易的因素。
因为我不能使用Deb指定的CSS答案，所以我选择不使用换行标记。
<nobr>e-mail</nobr>此外，我发现了一个导致IE8/9断掉连字符的特定场景。
破折号字符串包含用不间断空格分隔的单词-
- Width is limited
- Contains a
IE将其呈现为这样。
下面的代码重现了上图中的问题。我不得不使用元标签来强制渲染到IE9，因为IE10已经解决了这个问题。没有小提琴，因为它不支持元标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8"/>
<style>
body { padding: 20px; }
div { width: 300px; border: 1px solid gray; }
</style>
</head>
<body>
<div>
<p>If there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>https://stackoverflow.com/questions/7691569
复制相似问题
腾讯云开发者
