translateX应该包装文本

Question

我第一次尝试使用transform命令原则上可以正常工作，但当侧边栏打开时，文本就从容器中出来了。我该如何防止这种情况发生？文本应分布在剩余宽度上，即向底部较长。

我已经用overflow-wrap: break-word;尝试过了，但不幸的是，没有成功。

我希望我的例子不会太糟糕：

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

/* make scrollbar transparent */

/* ::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {width: 0px;background: transparent;} */
div {
scrollbar-width: none;
}

/* make scrollbar transparent */
html {
font-size: 0.8rem;
}
.wrapper {
max-width: 800px;
background: LightGrey;
}
.hide {
display: none;
}
.menu {
list-style-type: none;
}
ul li {
color: white;
font-weight: 100;
text-decoration: none;
font-size: 3rem;
line-height: 5rem;
}
.content {
width: 100%;
font-size: 200%;
padding: .5em;
position: relative;
transform: translateX(0px);
transition: transform .6s, background-position 1s .6s;
}
.sidebar {
background: DarkGrey;
position: fixed;
top: 0;
bottom: 0;
transform: translateX(-300px);
transition: transform .6s, background-position 1s .6s;
}
.list {
overflow-y: auto;
padding: .5em;
width: 300px;
height: 300px;
}
#state_sidebar:checked~.wrapper .sidebar {
transform: translateX(0);
background-position: 0 0;
}
#state_content:checked~.wrapper .sidebar {
transform: translateX(-300);
background-position: 0 0;
}
#state_sidebar:checked~.wrapper .content {
transform: translateX(300px);
}
#state_content:checked~.wrapper .content {
transform: translateX(0px);
}
.sidebar_toggle_label {
padding: .4em;
font-size: 300%;
}

<input type="radio" name="grid" id="state_sidebar" class="hide" checked>
<input type="radio" name="grid" id="state_content" class="hide">
<div class="wrapper">
<!--   <label for="menuToggler" class="menu-toggler">☰</label>
<input type="checkbox" id="menuToggler" class="input-toggler" checked /> -->
<label class="sidebar_toggle_label" for="state_sidebar">&#9776;</label>
<div class="content">
<h1>Solar System</h1>
<p>The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly. Of the objects that orbit the Sun directly, the largest are the eight planets, with the remainder being smaller objects,
the dwarf planets and small Soldar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury.</p> 
</div>
<div class="sidebar">
<label class="sidebar_toggle_label" for="state_content">&#10006;</label>
<div class="list">
<ul class="menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div>
</div>
</div>

Answer 1

您需要将容器(.content(宽度减少300px(侧边栏的宽度(。

您可以在max-width上设置transition。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

/* make scrollbar transparent */

/* ::-webkit-scrollbar {display: none;}
::-webkit-scrollbar {width: 0px;background: transparent;} */
div {
scrollbar-width: none;
}

/* make scrollbar transparent */
html {
font-size: 0.8rem;
}
.wrapper {
max-width: 800px;
background: LightGrey;
}
.hide {
display: none;
}
.menu {
list-style-type: none;
}
ul li {
color: white;
font-weight: 100;
text-decoration: none;
font-size: 3rem;
line-height: 5rem;
}
.content {
width: 100%;
max-width:100%;
font-size: 200%;
padding: .5em;
position: relative;
transform: translateX(0px);
transition: transform .6s, background-position 1s .6s,max-width .6s;
}
.sidebar {
background: DarkGrey;
position: fixed;
top: 0;
bottom: 0;
transform: translateX(-300px);
transition: transform .6s, background-position 1s .6s;
}
.list {
overflow-y: auto;
padding: .5em;
width: 300px;
height: 300px;
}
#state_sidebar:checked~.wrapper .sidebar {
transform: translateX(0);
background-position: 0 0;
}
#state_content:checked~.wrapper .sidebar {
transform: translateX(-300);
background-position: 0 0;
}
#state_sidebar:checked~.wrapper .content {
transform: translateX(300px);
max-width:calc(100% - 300px);
}
#state_content:checked~.wrapper .content {
transform: translateX(0px);
}
.sidebar_toggle_label {
padding: .4em;
font-size: 300%;
}

<input type="radio" name="grid" id="state_sidebar" class="hide" checked>
<input type="radio" name="grid" id="state_content" class="hide">
<div class="wrapper">
<!--   <label for="menuToggler" class="menu-toggler">☰</label>
<input type="checkbox" id="menuToggler" class="input-toggler" checked /> -->
<label class="sidebar_toggle_label" for="state_sidebar">&#9776;</label>
<div class="content">
<h1>Solar System</h1>
<p>The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly. Of the objects that orbit the Sun directly, the largest are the eight planets, with the remainder being smaller objects,
the dwarf planets and small Soldar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury.</p> 
</div>
<div class="sidebar">
<label class="sidebar_toggle_label" for="state_content">&#10006;</label>
<div class="list">
<ul class="menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div>
</div>
</div>