如何使用js，css或其他任何方式管理span中的文本中断

Question

标题可能有点令人困惑，但不知道如何正确命名。基本上我有这样的文字：

content3 (-content1) content4 (-content2)

我在span元素中显示。元素具有不同的宽度，在某些情况下，上面的文本需要分成两行。不幸的是，它常常用' - '符号刹车，使它看起来像这样：

content3 (-content1) content4 (-
content2)

有什么方法可以防止它发生。对这种格式感到满意：

content3 (-content1) content4 
(-content2)

Answer 1

如果您将自己的内容放在span中，则可以使用white-space:nowrap;将内容下拉。

HTML

<div class="sup" id="pr">
    <strong>
        <span class="content">content3</span>
        <span class="content">(-content1)</span>
        <span class="content">content4 </span> 
        <span class="content">(-content2)</span>
    </strong>
</div>

CSS

.sup {
    width: 300px;
    border: 1px solid black;
    margin-bottom: 2px;
}
#pr {
    width:100%;
}
.content {
    white-space:nowrap;
}

JSFiddle

Answer 2

您可以使用不间断的连字符‑来解决此问题。 我不确定这是否是理想的解决方案，它并不优雅，但它可以解决您的问题，而且很简单。