在启用CSS连字符自动时阻止单词中断

ct2axkht  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(107)

我有一个网站,我使用hyphens: auto函数来打断较长的单词。它工作正常,但在某些地方它打断了不应该打断的单词。例如团队成员的名字。我如何仍然保留连字符功能,但排除一些单词的打断?因为它只发生在很少的单词上,我可以单独编辑每个单词。
有什么建议吗?
谢谢!

63lcw9qa

63lcw9qa1#

由于没有代码示例,我假设我理解正确。
我认为把这些词放进一个你相应风格的跨度中应该会有效果。

<div>
    <p>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>
        very long paragraph which doesn't end Edgar <span>TestingnamesonIdont'tknowwhatcanmakethispossiblyanylongerthanthiswhichIamdoingrightnow.</span>

    </p>
</div>

p{
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

p span{

    overflow-wrap: normal;
    word-wrap: normal;
    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

希望这有帮助!

相关问题