I currently have an Angular 4 application where a left-side div displays a tree of items as recursive HTML lists. The issue I am facing is that long texts within this div get cut off by the right border, with a scrollbar appearing instead. What I would like is for the text to expand beyond the border and be displayed in a shadowed box when the user hovers over it, similar to how Windows Explorer behaves. You can view the intended behavior in the screenshots below.
Before mouse hover:
https://i.stack.imgur.com/d4YGz.png
After mouse hover:
https://i.stack.imgur.com/Jvx3Q.png
The current solution I have involves raising the entire enclosing list element, but I believe there is room for improvement. Below is the CSS code snippet I am using:
<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>ooooooooooooooooooooooooooooooooooooo</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>