Как всегда включать поля, когда в CSS недостаточно ширины экрана?
В css у меня есть div с полем, но при небольшой ширине правое поле удаляется из элемента.
см. это https://jsfiddle.net/d184wqhc/13/
<div class = "A">
<div>A</div>
</div>
css
.A div {
margin:30px;
width:500px;
height:100px;
background-color:cyan;
word-break: break-all;
}
Когда места достаточно, это выглядит так
но когда я уменьшаю ширину экрана больше, это выглядит как
как вы можете видеть, полоса прокрутки сдвинулась до упора вправо, но отступа от правого поля больше нет.
Как я могу сохранить весь текст в div с голубым фоном и сохранить интервал внутри полосы прокрутки?
Спасибо
но я не использую никаких отступов css
Ответы 2
Это потому, что содержимое переполняет элемент. Если вы посмотрите на элемент, цвет фона (голубой) будет только до определенной точки, а затем остановится. Вот где запас. Просто добавьте word-break: break-all;, и он перестанет переполняться. https://jsfiddle.net/pc7ekwd1/2/
Как я могу настроить его так, чтобы весь текст имел голубой фон, и все это с интервалом между полями, полностью содержалось в полосе прокрутки?
Я обновил jsfiddle, перерыв там не работает.
Я обновил его, чтобы он не был текстом, больше как внутренний блок div. Сломать все на этом не работает
Вы можете установить div как display: inline-block, inline-flex или inline-table, чтобы ширина не ограничивалась контейнером, и будут применяться любые padding и margin.
Также установите min-width: calc(100% - 60px), если вам нужно изначально иметь полную ширину.
div {
margin: 30px;
background-color: cyan;
display: inline-block;
min-width: calc(100% - 60px);
}<div>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
Это не маржа, это отступ.