Css translateX应该包装文本

我第一次尝试使用transform命令时，原则上应该是这样的，但是当侧边栏打开时，文本脱离了它的容器。 我怎样才能防止这种情况？ 文本应分布在剩余宽度上，即朝底部较长

我已经用

overflow-wrap:break-word尝试过了
我希望我的例子不太糟糕：


*{
填充：0；
保证金：0；
框大小：边框框；
}
/*使滚动条透明*/
/*：-webkit滚动条{显示：无；}
：-webkit滚动条{宽度：0px；背景：透明；}*/
div{
滚动条宽度：无；
}
/*使滚动条透明*/
html{
字体大小：0.8rem；
}
.包装纸{
最大宽度：800px；
背景：浅灰色；
}
.隐藏{
显示：无；
}
.菜单{
列表样式类型：无；
}
ulli{
颜色：白色；
字号：100；
文字装饰：无；
字体大小：3rem；
线高：5雷姆；
}
.内容{
宽度：100%；
字体大小：200%；
填充：.5em；
位置：相对位置；
转换：translateX（0px）；
变换：变换.6s，背景位置1s.6s；
}
.侧边栏{
背景：DarkGrey；
位置：固定；
排名：0；
底部：0；
转换：translateX（-300px）；
变换：变换.6s，背景位置1s.6s；
}
.名单{
溢出y：自动；
填充：.5em；
宽度：300px；
高度：300px；
}
#state_侧栏：选中~.wrapper.sidebar{
变换：translateX（0）；
背景位置：0；
}
#状态内容：选中~.wrapper.sidebar{
transform:translateX（-300）；
背景位置：0；
}
#state_侧栏：选中~.wrapper.content{
转换：translateX（300px）；
}
#state_content:选中~.wrapper.content{
转换：translateX（0px）；
}
.侧边栏切换标签{
填充：.4em；
字体大小：300%；
}

☰
太阳系
太阳系是太阳和直接或间接围绕太阳运行的物体的引力约束系统。在直接围绕太阳运行的天体中，最大的是八颗行星，其余的是较小的天体，
矮行星和索尔达星系的小天体。在间接环绕太阳运行的天体中，两颗卫星比最小的行星水星大。

✖

水银
维纳斯
土
火星
朱庇特
土星
天王星
海王星

您需要将容器（
.content
）的宽度减少到300px（侧边栏的宽度）

您可以在
max width
上设置
transition


*{
填充：0；
保证金：0；
框大小：边框框；
}
/*使滚动条透明*/
/*：-webkit滚动条{显示：无；}
：-webkit滚动条{宽度：0px；背景：透明；}*/
div{
滚动条宽度：无；
}
/*使滚动条透明*/
html{
字体大小：0.8rem；
}
.包装纸{
最大宽度：800px；
背景：浅灰色；
}
.隐藏{
显示：无；
}
.菜单{
列表样式类型：无；
}
ulli{
颜色：白色；
字号：100；
文字装饰：无；
字体大小：3rem；
线高：5雷姆；
}
.内容{
宽度：100%；
最大宽度：100%；
字体大小：200%；
填充：.5em；
位置：相对位置；
转换：translateX（0px）；
变换：变换.6s，背景位置1s.6s，最大宽度.6s；
}
.侧边栏{
背景：DarkGrey；
位置：固定；
排名：0；
底部：0；
转换：translateX（-300px）；
变换：变换.6s，背景位置1s.6s；
}
.名单{
溢出y：自动；
填充：.5em；
宽度：300px；
高度：300px；
}
#state_侧栏：选中~.wrapper.sidebar{
变换：translateX（0）；
背景位置：0；
}
#状态内容：选中~.wrapper.sidebar{
transform:translateX（-300）；
背景位置：0；
}
#state_侧栏：选中~.wrapper.content{
转换：translateX（300px）；
最大宽度：计算（100%-300px）；
}
#state_content:选中~.wrapper.content{
转换：translateX（0px）；
}
.侧边栏切换标签{
填充：.4em；
字体大小：300%；
}

☰
太阳系
太阳系是太阳和直接或间接围绕太阳运行的物体的引力约束系统。在直接围绕太阳运行的天体中，最大的是八颗行星，其余的是较小的天体，
矮行星和索尔达星系的小天体。在间接环绕太阳运行的天体中，两颗卫星比最小的行星水星大。

✖

水银
维纳斯
土
火星
朱庇特
土星
天王星
海王星

您需要将容器（
.content
）的宽度减少到300px（侧边栏的宽度）

您可以在
max width
上设置
transition


*{
填充：0；
保证金：0；
框大小：边框框；
}
/*使滚动条透明*/
/*：-webkit滚动条{显示：无；}
：-webkit滚动条{宽度：0px；背景：透明；}*/
div{
滚动条宽度：无；
}
/*使滚动条透明*/
html{
字体大小：0.8rem；
}
.包装纸{
最大宽度：800px；
背景：浅灰色；
}
.隐藏{
显示：无；
}
.菜单{
列表样式类型：无；
}
ulli{
颜色：白色；
字号：100；
文字装饰：无；
字体大小：3rem；
线高：5雷姆；
}
.内容{
宽度：100%；
最大宽度：100%；
字体大小：200%；
填充：.5em；
位置：相对位置；
转换：translateX（0px）；
变换：变换.6s，背景位置1s.6s，最大宽度.6s；
}
.侧边栏{
背景：DarkGrey；
位置：固定；
排名：0；
底部：0；
转换：translateX（-300px）；
变换：变换.6s，背景位置1s.6s；
}
.名单{
溢流