隐藏列表项中的文本

Question

我在这里遇到麻烦。

HTML

<div class="navbar slide-menu">
<div class="container">
    <ul class="nav navbar-default">
        <li class="brand"><a href="#">Menu</a></li>
        <li class="make-hidden"><a href="#">Home-to landing page</a></li>
        <li class="make-hidden"><a href="#">More-find out more</a></li>
        <li class="make-hidden"><a href="#">Social-connect with us</a></li>
        <li class="make-hidden"><a href="#">Contact-find us near you</a></li>
    </ul>
</div>

CSS

.slide-menu{
float:left;
width:50%;
height: 100%;
margin-left:0px;
margin-top:100px;
}
.container{
margin-left:0;
padding: 0;
}
.nav{
width:25%;
margin-left:0;
}
.make-hidden{
position: absolute;
width:15%;
z-index: 1;
overflow: hidden;
}
.make-visible{
width:100%;
transition:width 0.7s linear;
}

还有一些JQuery可以让li元素在鼠标输入时将宽度转换为100％。 但我的问题是我希望文本在隐藏时仅部分显示在li元素内部。不要调整它的宽度和高度。 谁知道怎么做？ 感谢

供参考：

Answer 1

.slide-menu {
  float: left;
  width: 50%;
  height: 100%;
}
.container {
  margin-left: 0;
  padding: 0;
}
.make-hidden {
  /* position: absolute; */ /* <------------- removed */
  width: 15%;
  white-space: nowrap; /* <----------------- this is key */
  z-index: 1;
  overflow: hidden;
  transition: width 0.7s linear; /* <--------- this has been moved */
}
.make-hidden:hover {
  width: 100%;
}

<div class="navbar slide-menu">
    <div class="container">
        <ul class="nav navbar-default">
            <li class="brand"><a href="#">Menu</a></li>
            <li class="make-hidden"><a href="#">Home-to landing page</a></li>
            <li class="make-hidden"><a href="#">More-find out more</a></li>
            <li class="make-hidden"><a href="#">Social-connect with us</a></li>
            <li class="make-hidden"><a href="#">Contact-find us near you</a></li>
        </ul>
    </div>
</div>