如何让div中的文本在扩展的div中保持相同的大小宽度

Question

我有一些代码，通过增加屏幕左侧的宽度来扩展div。在这个div中，我有一个列表，其中的文本将div包装下来。当它展开时，您可以看到文本随着它的大小逐字扩展，是否有一种方法可以使文本保持相同的大小，以便当div展开时，文本不会移动(几乎就像文本只是隐藏在它后面，直到它移出)?尝试使用纯JavaScript, HTML和/或CSS。

Expand
</button>
<div id="listmenu" class="list">
<span onclick="document.getElementById('listmenu').style.width = '0%'">&times;</span>
<ul>
<li>Placeholder text that is long enough to go to the next line</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</div>
CSS:
.list {
position: fixed;
overflow-x: hidden;
background-color: black;
width: 0%;
height: 100%;
left: 0;
top: 0;
transition: 1s all ease-in-out;
}
.list li {
color: white;
}
.list span {
float: right;
padding-right: 5px;
color: white;
cursor: pointer;
}

JSFiddle

Answer 1

你可以这样尝试:

.list {
position: fixed;
overflow-x: hidden;
background-color: black;
width: 30%;
height: 100%;
left: -30%;
top: 0;
transition: 1s all ease-in-out;
}
.list li {
color: white;
}
.list span {
float: right;
padding-right: 5px;
color: white;
cursor: pointer;
}

<button onclick="document.getElementById('listmenu').style.left = '0'">
Expand
</button>
<div id="listmenu" class="list">
<span onclick="document.getElementById('listmenu').style.left = '-30%'">&times;</span>
<ul>
<li>Placeholder text that is long enough to go to the next line</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</div>