html - 当鼠标悬停在 html/CSS/angular/bootstrap 中时，扩展树的长文本行(嵌套的 HTML 列表)

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 5 年前。

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

没有鼠标悬停:

鼠标悬停

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

我将 Matthias 的回答放在代码片段中。它在平面列表中运行良好，但我需要一个像列表这样的递归树，所以它需要改进:

.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>

最佳答案

您可以更改 overflow和 width悬停元素时的属性，作为一种快速简单的解决方案。试试下面的代码片段，请注意，width: fit-content NOT 在 Internet Explorer 和 Edge 中工作，因为它被认为是 experimental feature .

支持`width: fit-content` (2018 年 4 月)

+-----------------------+-------------------+
| Google Chrome         | 22.0 (-webkit)    |
|                       | 46.0              |
+-----------------------+-------------------|
| Mozilla Firefox       | 3.0 (-moz)        |
+-----------------------+-------------------|
| Internet Explorer     | X                 |
+-----------------------+-------------------|
| Opera                 | 15 (-webkit)      |
+-----------------------+-------------------|
| Safari                | 6.1 (-webkit)     |
+-----------------------+-------------------|
| Microsoft Edge        | X                 |
+-----------------------+-------------------|

Source 1

Source 2

编辑

我试过您更新后的问题中的代码，您可能想看看下面的代码片段。我刚刚应用了 overflow <li> 样式元素而不是整个 sidebar wrapper 。

请注意:由于默认情况下列表中的点在元素之外，overflow-x属性(property)将隐藏它。所以我决定在你悬停元素时也隐藏它。如果您真的需要这个点，您可以使用 list-style-position: inside 覆盖默认值(导致讨厌的换行符)或者你可以尝试用 ::before 伪造这些点伪元素。

.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>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</li>
          <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
          <li>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</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>

关于html - 当鼠标悬停在 html/CSS/angular/bootstrap 中时，扩展树的长文本行(嵌套的 HTML 列表)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49983295/