html - 行内 block 元素行中的软连字符

Question

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

这是我尝试过的:

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>

当使用行内 block 添加空格时(参见 Add soft hyphens in a CMS: getting it to work in 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>