使用 SASS (Bourbon) 或 JavaScript 在工具提示中防止寡妇？答案

【问题标题】：Prevent Widows in Tooltips with SASS (Bourbon) or JavaScript?使用 SASS (Bourbon) 或 JavaScript 在工具提示中防止寡妇？
【发布时间】：2018-03-08 05:38:58
【问题描述】：

我有一个使用 SASS（和 Bourbon）实现的自定义工具提示，并希望防止寡妇出现，例如：

.custom-tooltip {
  @include position(relative);
  .tooltip-right {
    font-family: $brand-font-condensed;
    font-size: 14px;
    font-weight: 400;
    position: fixed;
    text-align: left;
    overflow: visible !important;
    background-color: rgba($dark-gray, 0.95);
    color: #fff;
    padding: 7px 10px;
    z-index: 9000;
    visibility: hidden;
    opacity: 0;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
    @include transition (.1s ease-in);
    @include size(200px auto);
    white-space: normal;
  }

  &:hover .tooltip-right, {
    visibility: visible;
    opacity: 1;
    @include transition (.2s ease-out);
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
  }
}

是否有任何仅使用 CSS 的首选方法，或者只能使用 JavaScript 正确计算？我知道我有一个适当的宽度，但没有它，工具提示将只是一个大句子。我不想使用插件，因为根据设计，这些工具提示有很多不同的用例，所以我是手工完成的。提前致谢！

【问题讨论】：

标签： javascript css sass tooltip bourbon

【解决方案1】：

根据工具提示内容的来源，处理此问题的最佳方法是将内容更新为在最后两个单词之间使用&nbsp; 作为空格。

https://unicode-table.com/en/00A0/

【讨论】：

嘿，内容是动态生成的，所以这似乎不太可能，除非我用 JS 注入它。