html - 当鼠标悬停在 html/CSS/angular/bootstrap 中时显示树的完整长文本行(嵌套的 HTML 列表)

Question

我有一个 Angular 为 4 的应用程序，左侧有一个 div，我将元素树显示为递归 HTML 列表。 长文本应该在 div 的边界上展开，并在用户将鼠标移到它上面时放在一个阴影框中，就像 Windows 资源管理器所做的那样。请参阅以下屏幕截图。

没有鼠标悬停:

鼠标悬停

长文本位于页面左侧的一个div 中，并被右侧div 边框剪切。在边框处，您会看到一个滚动条。当我将鼠标移到长文本上时，我希望文本显示到 div 的边界之外，以便可以阅读其全部内容。

我有一个解决方案，其中提出了整个封闭的 List-Element， 所以需要改进:

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.sidebar li {
  overflow-x: hidden;
  background: white;
}

.sidebar li:hover {
  list-style-type: none;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  overflow: visible;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

<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>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
          </li>
          <li>
            <span>oooooooooooooooooooooooooooooooooooo</span>
            <ul>
              <li>
                <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
              </li>
            </ul>
        </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>

Answer 1

通过更改 HTML 结构找到了解决方案。现在我有了 inside of ，但它有效。

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.sidebar li {
  overflow-x: hidden;
  background: white;
}

.sidebar li:hover {
  list-style-type: none;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  overflow: visible;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

<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>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
          </li>
          <li>
            <span>oooooooooooooooooooooooooooooooooooo</span>
          </li>
          <ul>
            <li>
              <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
            </li>
          </ul>
        </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>