如果& shy;在词的结尾的额外连字符;在单词的中间使用，并且父div是窄的 [英] Extra hyphen at end of word if ­ is used in middle of the word and the parent div is narrow

问题描述

当我在这样一个单词中间使用软连字符时：

When I use a soft hyphen in the middle of a word like this:

<div>
  <span style="font-size: 2em">
    <a href="/Page.aspx?pageID=23">SPECIAL&shy;BEST&Auml;LLNING</a>
  </span>
  <br />
  <a href="/Page.aspx?pageID=23">
    <span style="font-size:1.4em">L&auml;s mer h&auml;r &raquo;</span>
  </a>
</div>

且父div足够窄，我在预期的地方获得连字符，这个词的结尾是这样的：

and the parent div is narrow enough, I get a hyphen both at the expected place, but also in the end of the word like this:

为什么？

css

div
{
  background: #ee7601;
  height: 11.8em;
  color: #fff;
  padding: 1em;
  padding-top: 1.6em;
  text-align: center;
  width: 218px;
}

a
{
  color: inherit;
}

http://jsfiddle.net/e508oppo/2/

推荐答案

& shy; 将自动创建换行符，并且似乎在此之后，浏览器将该单词分为两个不同的单词。
（ HTML中的软连字符（< wbr> vs. & shy;））。

The ­ will automatically create a line break, and it seems that after that, the browser considers the word separated as two different words. (Soft hyphen in HTML (<wbr> vs. &shy;)).

在这里，由于你的第二方的word太长（如果容器有 word-break ）浏览器在它的末尾添加一个连字符，因为使用& shy; 它认为它应该，但没有换行，因为你没有在容器上设置一个word-wrap / break。

Here, since your second party of word is too long (the G would go to the line if the container had word-break) the browser puts an hyphen at the end of it, because the use of ­ before makes it think it should, but without line breaking because you did not set a word-wrap/break on the container

通过给块更大的大小，它应该工作精细 http://jsfiddle.net/e508oppo/4/

By giving a bigger size to the block, it should work fine http://jsfiddle.net/e508oppo/4/

这篇关于如果&amp; shy;在词的结尾的额外连字符;在单词的中间使用，并且父div是窄的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！