如何使用js、css或其他任何东西管理span中的文本分隔符

How to manage text breaks in span using js, css or anything else

本文关键字：span 管理 分隔符 文本 任何东 js 何使用 css 其他      更新时间：2023-09-26

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

content3 (-content1) content4 (-content2)

我将其显示在跨度元素中。元素有不同的宽度，在某些情况下，上面的文本需要分成两行。不幸的是，它经常踩下"-"符号，使其看起来像这样：

content3 (-content1) content4 (-
content2)

我有什么办法可以阻止它发生吗。会对这种格式感到满意：

content3 (-content1) content4 
(-content2)

如果将内容包含在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

您总是可以使用不间断的连字符&#8209;来绕过这一点。我不确定这是否是理想的解决方案，它并不优雅，但它会解决你的问题，而且很简单。

相关文章：