能否实现<abbr>标签内容自动换行？不可行时有哪些替代方案？

原生标签title换行限制 #

原生浏览器渲染的标签自带的title属性提示框，默认不支持自动换行，超长内容会横向溢出，仅支持通过手动插入换行符实体
实现强制手动换行，无法根据内容长度自适应折行，不同浏览器对title提示框的最大宽度限制也有差异，适配性较差。 #

自动换行实现方案 #

如果要实现提示内容自动换行，需要放弃原生title的默认渲染，使用自定义悬浮提示方案，推荐两种常用实现：

方案1：纯CSS自定义悬浮提示（无JS依赖） #

把原title的内容迁移到自定义属性data-tooltip中，通过CSS伪元素生成自定义提示框，自行配置换行规则：

HTML修改示例

<li>●Definition:Some text <abbr data-tooltip="(My very very long definition 非常长的定义内容会自动根据设置的最大宽度换行)" tabIndex={0}>betriebswirtschaftliche Fragen</abbr></li>

CSS代码示例

abbr {
  position: relative;
  cursor: help;
  /* 保留abbr默认的虚线下划线标识 */
  text-decoration: underline dotted;
}

/* 悬浮时展示自定义提示框 */
abbr:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 0;
  background: rgba(0,0,0,0.8);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  /* 核心换行配置 */
  white-space: normal;
  word-break: break-word;
  /* 自定义提示框最大宽度，超过宽度自动折行 */
  max-width: 220px;
  z-index: 9999;
}

该方案无需引入额外JS资源，提示框样式、最大宽度、换行规则都可以自行调整，适配所有现代浏览器。

方案2：使用UI组件库的Tooltip组件 #

如果项目已经引入了前端UI组件库，可以直接用组件库自带的Tooltip组件包裹标签，自带自动换行、位置自适应、交互延时等成熟能力，无需自行编写样式：

React + Ant Design 示例

import { Tooltip } from 'antd';

<Tooltip title="(My very very long definition 非常长的定义内容会自动换行)">
  <abbr tabIndex={0}>betriebswirtschaftliche Fragen</abbr>
</Tooltip>

Vue + Element UI 示例

<el-tooltip content="(My very very long definition 非常长的定义内容会自动换行)" placement="top">
  <abbr tabIndex={0}>betriebswirtschaftliche Fragen</abbr>
</el-tooltip>

问题效果参考 #

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