Question

当内联块元素之间存在换行符时，我需要插入连字符。

这就是我的尝试：

＆＃13;

span {
  display: inline-block;
}

＆＃13;

<div style="width: 200px">
  <span>This is a long se</span>&shy;<span>quence of spans.</span>
  <span>This is a long se</span>&shy;<span>quence of spans.</span>
  <span>This is a long se</span>&shy;<span>quence of spans.</span>
</div>

＆＃13;

但至少在Chrome中没有显示连字符。我需要一个像这样的结果，在这个结果中它们被正确显示，但没有跨度。

＆＃13;

span {
  display: inline-block;
}

＆＃13;

<div style="width: 200px">
  <span>This is a long se</span>-<span>quence of spans.</span>
  <span>This is a long se</span>-<span>quence of spans.</span>
  <span>This is a long se</span>-<span>quence of spans.</span>
</div>

＆＃13;

使用内联块添加空格时（请参阅Add soft hyphens in a CMS: getting it to work in Chrome）不起作用：

＆＃13;

span {
  display: inline-block;
}

＆＃13;

<div style="width: 200px">
  <span>This is a long se</span> &shy; <span>quence of spans.</span>
  <span>This is a long se</span> &shy; <span>quence of spans.</span>
  <span>This is a long se</span> &shy; <span>quence of spans.</span>
</div>

＆＃13;

任何想法，不使用JavaScript？谢谢。

Answer 1

只是在实体周围没有跨度的情况下执行：Spans是内联元素，因此它们会中断单词（这就是为什么你看不到连字符）， 不

span {
  display: inline-block;
}

<div style="width: 140px">
  <span>This is a long se&shy;quence of spans.</span>
  <span>This is a long se&shy;quence of spans.</span>
  <span>This is a long se&shy;quence of spans.</span>
</div>

Answer 2

span {
  display: inline-block;
}

<div style="width: 200px">
  <span>This is a long se</span> &#8209; <span>quence of spans.</span>
  <span>This is a long se</span> &#8209; <span>quence of spans.</span>
  <span>This is a long se</span> &#8209; <span>quence of spans.</span>
</div>

Answer 3

没有Hyphenation Opportunity因为没有要破解的角色。至少这是Chrome选择实施该标准的方式。

More info

Answer 4

Hyphenator.js似乎是一种选择。

适用于Chrome，适用于旧版浏览器的polyfill，以及在调整大小时重新使用连字符。 Demo here

我已经看到了关于避免JS的评论，但我认为这不可能，导致最终文本大小仅在客户端定义，并且可能受用户浏览器设置的影响。

Answer 5

我用JavaScript解决了。 HTML：

<div style="width: 200px">
  <span>This is a long se<span class="hyphen">-</span></span><span>quence of spans.</span>
  <span>This is a long se<span class="hyphen">-</span></span><span>quence of spans.</span>
  <span>This is a long se<span class="hyphen">-</span></span><span>quence of spans.</span>
</div>

CSS：

.hyphen {
    display: none;
}

.hyphen.hyphen-shown {
    display: inline;
}

JavaScript的：

    var handler = function(evt) {
        var hyphens = document.getElementsByClassName("hyphen");

        for (var i = 0; i < hyphens.length; i++) {
            var hyphen = hyphens[i];

            hyphen.className = "hyphen";

            var element = hyphen.parentNode.parentNode;
            var element = parent.nextElementSibling;

            if (parent == null || next == null) {
                continue;
            }

            var py = parent.getBoundingClientRect().bottom;
            var ny = next.getBoundingClientRect().bottom;

            if (Math.abs(py - ny) > 1) {
                hyphen.className = "hyphen hyphen-shown";
                var py2 = parent.getBoundingClientRect().bottom;

                if (Math.abs(py - py2) > 1) {
                    // The hyphen made the parent be shown on next line.
                    hyphen.className = "hyphen";
                }
            }
        }
    };

    window.addEventListener('resize', handler, false);

内联块元素中的软连字符

5 个答案: