Angular4树形列表长文本鼠标悬停溢出显示优化方案咨询

我懂你现在的困扰——原来的方案里，鼠标悬停时长文本的<li>元素会因为设置了width: fit-content被撑开，导致整个列表布局错位抬高，体验很不好对吧？咱们换个思路，不用修改<li>的宽度，而是给内部文本加个脱离文档流的悬停提示框，既不破坏原有布局，又能完整显示长文本。

优化核心思路 #

• 保持<li>元素的宽度完全不变，避免影响列表整体布局
• 用伪元素+绝对定位承载悬停时的完整文本，让提示框脱离文档流，不会挤压其他元素
• 通过自定义属性传递完整文本，无需额外添加DOM节点

完整代码实现 #

CSS 样式 #

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  border-right: 1px solid #eee;
  width: 250px; /* 固定侧边栏宽度，确保长文本会被截断 */
}

.sidebar ul {
  padding-left: 1.5rem;
  margin: 0;
}

.sidebar li {
  position: relative; /* 为内部绝对定位的提示框提供参考坐标 */
  overflow-x: hidden;
  background: white;
  padding: 4px 0;
}

.sidebar li span {
  display: inline-block;
  white-space: nowrap; /* 强制文本不换行，触发截断效果 */
}

/* 悬停时显示完整文本提示框 */
.sidebar li:hover span::after {
  content: attr(data-text); /* 从自定义属性中读取完整文本 */
  position: absolute;
  left: 0;
  top: 100%;
  background: white;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding: 4px 8px;
  z-index: 1001;
  white-space: nowrap;
  margin-top: 2px;
}

HTML 结构（静态示例） #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-4 col-md-3 d-none d-sm-block sidebar">
      <div>
        <ul>
          <li>
            <span data-text="mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
          </li>
          <li>
            <span data-text="oooooooooooooooooooooooooooooooooooo">oooooooooooooooooooooooooooooooooooo</span>
            <ul>
              <li>
                <span data-text="mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <main role="main" class="col-sm-8 ml-sm-auto col-md-9 pt-3">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </main>
  </div>
</div>

Angular4 动态适配 #

在你的Angular4项目中，只需通过属性绑定动态设置data-text即可适配递归树形结构：

组件数据示例

// 组件.ts 文件
treeItems = [
  { name: 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm', children: [] },
  { 
    name: 'oooooooooooooooooooooooooooooooooooo', 
    children: [{ name: 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm', children: [] }] 
  }
];

递归模板示例

<!-- 组件.html 文件 -->
<ul>
  <li *ngFor="let item of treeItems">
    <span [attr.data-text]="item.name">{{item.name}}</span>
    <!-- 递归渲染子列表 -->
    <ul *ngIf="item.children.length > 0">
      <li *ngFor="let child of item.children">
        <span [attr.data-text]="child.name">{{child.name}}</span>
      </li>
    </ul>
  </li>
</ul>

效果展示 #

无悬停状态 #

悬停状态 #

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