У меня есть угловое 4 приложение с дивом слева, где я показываю дерево элементов в виде рекурсивных списков HTML.
Длинные тексты должны быть расширены за границу элемента div и помещены в затемненное поле, когда пользователь наводит указатель мыши на него, как это делает проводник Windows. Смотрите следующие скриншоты.
Без наведения мыши:
При наведении мыши:
Длинный текст находится в div в левой части страницы и обрезается по правой границе div. На границе вы видите полосу прокрутки. Когда я перемещаю мышь над длинным текстом, я хочу, чтобы текст выводился за пределы границы div, чтобы можно было прочитать все его содержимое.
У меня есть решение, в котором поднимается весь включающий элемент списка,
поэтому его нужно улучшить:
.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>