内联块元素行中的软连字符

Question

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

这是我尝试过的：

span {
  display: inline-block;
}

<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>

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

span {
  display: inline-block;
}

<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>

使用内联块添加空格时(请参阅在 CMS 中添加软连字符：使其在 Chrome 中正常工作(：

span {
  display: inline-block;
}

<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>

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

Answer 1

只需在­实体周围没有跨度：跨度本身就是内联元素，因此它们会中断单词(这就是为什么您看不到连字符的原因(，而­没有

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

没有断

字机会，因为没有要中断的字符。至少这是Chrome选择实施该标准的方式。

更多信息

Answer 4

我用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);

<</div> div class="one_answers">

连字符.js似乎是一种选择。

在 Chrome 上运行良好，为旧版浏览器提供填充代码，并在调整大小时重新渲染连字符。在这里演示。

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