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>

translateX 应该换行

translateX should wrap the text

css

word-wrap

css-transforms