Как оттянуть блок с длинным текстом?

Ссылка скопирована
4 апреля 2026 1 ответ

Как оттянуть блок с длинным текстом?

Css код

* {   border-box: box-sizing; } body {   background: black;   color: yellow;    border: 1px dashed red;    padding: 20px; } div {   border: 1px dashed red;   padding: 0;    text-align: center; } /* img {   width:250px   height: 250; }*/ #one {   display: none; } .open-closed {   display:flex; } .block {   width:100px;    background-color: orange;   color: black; }

* { border-box: box-sizing; } body { background: black; color: yellow; border: 1px dashed red; padding: 20px; } div { border: 1px dashed red; padding: 0; text-align: center; } /* img { width:250px height: 250; }*/ #one { display: none; } .open-closed { display:flex; } .block { width:100px; background-color: orange; color: black; }

<h1>Здесь что-то произошло?)</h1>  <div class="container"> <div class="open-closed"> <div class="block">Block</div>  <p>Это произошло в 1932-м, когда тюрьма штата еще находилась в Холодной  Горе. И электрический стул был, конечно, там же.</p>  </div> <div class="open-closed"> <div class="block">Block</div>  <p>Заключенные острили по поводу стула так, как обычно острят люди,  говоря о том, что их страшит, но чего нельзя избежать. Они называли его Олд  Спарки (Старик Разряд) или Биг Джуси («Сочный кусок»). Они отпускали  шуточки насчет счетов за электроэнергию, насчет того, как Уорден Мурс этой осенью будет готовить обед ко Дню Благодарения, раз его жена Мелинда  слишком больна, чтобы готовить.</p>  </div> <div class="open-closed"> <div class="block">Block</div>  <p>У тех же, кому действительно предстояло сесть на этот стул, юмор  улетучивался в момент. За время пребывания в Холодной Горе я руководил  семидесятые восемью казнями (эту цифру я никогда не путаю, я буду помнить  ее и на смертном одре) и думаю, что большинству этих людей становилось  ясно, что с ними происходит, именно в тот момент, когда их лодыжки  пристегивали к мощным дубовым ножкам Олд Спарки. Приходило понимание  (было видно, как осознание поднимается из глубины глаз, похожее на  холодный испуг), что их собственные ноги закончили свой путь. Кровь еще  бежала по жилам, мускулы были еще сильны, но все было кончено, им уже не  пройти ни километра по полям, не танцевать с девушками на сельских  праздниках. Осознание приближающейся смерти приходит к клиентам Олд  Спарки от лодыжек. Есть еще черный шелковый мешок, его надевают им на  головы после бессвязных и нечленораздельных последних слов. Считается, что  этот мешок для них, но я всегда думал, что на самом деле он для нас, чтобы мы  не видели ужасного прилива страха в их глазах, когда они понимают, что  сейчас умрут с согнутыми коленями.</p>    </div> <div class="open-closed"> <div class="block">Block</div>  <p>Ошибка!</p> </div>  <!--<div style="clear:both;" id="one"></div>--> </div><code lang="html"> </code>

<h1>Здесь что-то произошло?)</h1> <div class="container"> <div class="open-closed"> <div class="block">Block</div> <p>Это произошло в 1932-м, когда тюрьма штата еще находилась в Холодной Горе. И электрический стул был, конечно, там же.</p> </div> <div class="open-closed"> <div class="block">Block</div> <p>Заключенные острили по поводу стула так, как обычно острят люди, говоря о том, что их страшит, но чего нельзя избежать. Они называли его Олд Спарки (Старик Разряд) или Биг Джуси («Сочный кусок»). Они отпускали шуточки насчет счетов за электроэнергию, насчет того, как Уорден Мурс этой осенью будет готовить обед ко Дню Благодарения, раз его жена Мелинда слишком больна, чтобы готовить.</p> </div> <div class="open-closed"> <div class="block">Block</div> <p>У тех же, кому действительно предстояло сесть на этот стул, юмор улетучивался в момент. За время пребывания в Холодной Горе я руководил семидесятые восемью казнями (эту цифру я никогда не путаю, я буду помнить ее и на смертном одре) и думаю, что большинству этих людей становилось ясно, что с ними происходит, именно в тот момент, когда их лодыжки пристегивали к мощным дубовым ножкам Олд Спарки. Приходило понимание (было видно, как осознание поднимается из глубины глаз, похожее на холодный испуг), что их собственные ноги закончили свой путь. Кровь еще бежала по жилам, мускулы были еще сильны, но все было кончено, им уже не пройти ни километра по полям, не танцевать с девушками на сельских праздниках. Осознание приближающейся смерти приходит к клиентам Олд Спарки от лодыжек. Есть еще черный шелковый мешок, его надевают им на головы после бессвязных и нечленораздельных последних слов. Считается, что этот мешок для них, но я всегда думал, что на самом деле он для нас, чтобы мы не видели ужасного прилива страха в их глазах, когда они понимают, что сейчас умрут с согнутыми коленями.</p> </div> <div class="open-closed"> <div class="block">Block</div> <p>Ошибка!</p> </div> <!--<div style="clear:both;" id="one"></div>--> </div><code lang="html"> </code>

Дополнительно:

куда оттянуть?

  • - Какой из первых трёх?
    - Что значит оттянуть?
  • historydev, проблема в том, что я хочу, чтобы все выглядело красиво, так как в 1 диве показан оранжевый блок. Оранжевым блокам выдана ширина 100 пикселей, почему в правом блоке с текстом, содержимое не отодвигается от содержимого левого? Я понимаю, что текст в принципе так должен себя вести, занимать контентную часть блока. То есть блоки с большим количеством текста не дают занять требуемую ширину блоков слева проще говоря, почему это происходит я не понимаю)
  • rootnoroot, в общем блоки слева и блоки справа(оранжевые block и с текстом) в флекс контейнере не растягиваются поровну между собой
  • xcpway, Текст там занимает ровно столько места, насколько выглядит, написал ответ.
  • .block {   width: 100px;   flex-shrink: 0; /* Запретить сжиматься меньше заданного */ }

    .block { width: 100px; flex-shrink: 0; /* Запретить сжиматься меньше заданного */ }

    Как оттянуть блок с длинным текстом?

    Откуда вы только такие формулировки рожаете...

    так?
    snippet

    • Да) но как?)
    • Эхх гриды
    • Значит по другому никак
    • xcpway, можно и на flex
      мне на гридах удобнее
      блоку слева задайте ширину
      блоку p справа задайте отступ слева margin-left

    Ответы:

    В flexbox по дефолту стоит justify-content: flex-start;
    Тебе нужно применить к параграфу с текстом margin-left: auto - прижмётся к правому краю.

    snippet

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Сергей Миронов Ответ

    Для того чтобы оттянуть блок с длинным текстом на вашем сайте, можно использовать CSS свойство overflow. Это свойство позволяет управлять тем, что происходит, когда содержимое блока выходит за его границы.

    Пример использования этого свойства для оттягивания блока с длинным текстом:

    <div style="width: 200px;height: 200px;overflow: auto">
      Ваш длинный текст здесь...
    </div>

    <div style="width: 200px;height: 200px;overflow: auto"> Ваш длинный текст здесь... </div>

    Этот код создаст блок размером 200x200 пикселей, в котором будет отображаться ваш длинный текст. Если текст выйдет за пределы блока, то появятся полосы прокрутки, позволяющие просматривать текст внутри блока.

    Если вы хотите, чтобы текст автоматически переносился на новую строку вместо того, чтобы выходить за пределы блока, вы можете использовать свойство overflow-wrap:

    <div style="width: 200px">
      Ваш длинный текст здесь...
    </div>

    <div style="width: 200px"> Ваш длинный текст здесь... </div>

    Этот код создаст блок, в котором текст будет автоматически переноситься на новую строку, если он не помещается внутри блока.

    Надеюсь, что это поможет вам оттянуть блок с длинным текстом на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно