如何用SASS（Bourbon）或JavaScript避免提示框出现孤行？

嘿，这个问题我太有发言权了！完全可以只用CSS搞定提示框的孤行问题，根本不需要JavaScript，刚好契合你手动实现、不想用插件的需求～

先给你吃个定心丸：不需要JS，纯CSS就能完美解决！下面几个方案，你可以根据自己的场景选择：

1. 用 text-wrap: balance（首推现代浏览器） #

这是CSS专门为优化文本换行推出的新属性，简直是孤行的克星。只要给你的提示框加上：

.tooltip {
  width: 200px; /* 你已经设置的固定宽度 */
  text-wrap: balance;
}

它会自动重新分配每行的字数，让换行更均匀，从根源上减少最后一行只有单个词的情况。现在Chrome、Firefox、Safari的新版本都支持，兼容性拉满。

2. 自动连字符 hyphens: auto（适合含长单词的场景） #

如果你的提示框里有长单词，开启自动连字符能把单词拆到两行，避免单个长词独占一行：

.tooltip {
  width: 200px;
  hyphens: auto;
  /* 可以指定语言规则，比如英文 */
  hyphenate-locale: "en-US";
}

这个属性兼容性也很好，几乎所有主流浏览器都支持，和text-wrap: balance一起用效果更佳。

3. 手动插入软连字符（固定内容专属） #

如果提示框的内容是固定不变的，你可以手动在允许换行的位置插入软连字符­，比如：

<div class="tooltip">这是一段可能出现孤行的长文本&shy;内容</div>

这样浏览器会优先在你指定的位置换行，彻底杜绝孤行。缺点是要手动处理每个内容，适合内容固定的场景。

4. 弹性宽度替代固定宽度（动态内容场景） #

如果提示框内容长度变化大，试试用min-width+max-width代替固定宽度：

.tooltip {
  min-width: 150px;
  max-width: 250px;
  text-wrap: balance;
}

这样提示框会根据内容自动调整宽度，既不会太窄挤成孤行，也不会太宽影响布局，灵活性很高。

以上都是纯CSS实现，完全不用依赖JS或插件，完美符合你的需求。要是需要兼容极旧的浏览器（比如IE），可能得做降级处理，但现在大部分项目都不用考虑IE了，这些方案足够好用。

内容的提问来源于stack exchange，提问作者Edgar Quintero