#css #word-wrap #css-transforms
#css #перенос слов #css-преобразования
Вопрос:
Моя первая попытка с помощью команды 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">amp;#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">amp;#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> Ответ №1:
Вам нужно уменьшить ширину контейнера ( .content ) на 300 пикселей (ширина боковой панели).
Вы можете установить transition on max-width .
* {
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">amp;#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">amp;#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>