Нужна помощь с версткой (HTML)

95
30 марта 2022, 18:40

Всем, доброго времени суток. Назрел интересный вопросик относительно верстки блоков-карточек (по крайней мере я их так называю). Проблема в размере блока с текстом. Как вы увидите на изображении данные блоки разного размера, а соответственно одна строка длинней другой, а менять в коде размеры этих блоков довольно трудоемкий процесс, особенно когда таких карточек много. Вопрос: можно ли делать перенос строки после определенного слова, не прибегая к изменениям размера самого блока? Или же это на грани фантастики?

Answer 1

Чтобы текст выровнять по ширине, необходимо добавить свойство text-align: justify;.

Чтобы текст после определенного слова перенести на следующую строку, можно в самом тексте после этого же слова добавить тег <br>. Это вы можете увидеть в третьем приведенном блоке.

Вот собственно и вся фантастика :)

.block { 
  position: relative; 
  overflow: hidden; 
  max-width: 600px; 
  margin: 0 auto; 
  margin-top: 20px; 
  margin-bottom: 20px; 
} 
 
.icon { 
  position: absolute; 
  top: 5px; 
  left: 0; 
} 
 
.text { 
  position: relative; 
  overflow: hidden; 
  padding-left: 70px; 
  text-align: justify; 
} 
 
h2 { 
  margin: 0; 
  padding: 0; 
}
<div class="block"> 
  <div class="icon"><img src="https://pp.userapi.com/c844722/v844722073/f455e/JhCHWm6fkuo.jpg?ava=1"></div> 
  <div class="text"> 
    <h2>Александр Сергеевич Пушкин</h2> 
    <p>Александр Пушкин начал писать свои первые произведения уже в семь лет. В годы учебы в Лицее он прославился, когда прочитал свое стихотворение Гавриилу Державину. Пушкин первым из русских писателей начал зарабатывать литературным трудом. Он создавал 
      не только лирические стихи, но и сказки, историческую прозу и произведения в поддержку революционеров — за вольнодумство поэта даже отправляли в ссылки.</p> 
  </div> 
</div> 
<div class="block"> 
  <div class="icon"><img src="https://i.simpalsmedia.com/point.md/news/50x50/77c9feada79a08fd01b7b64d542ea92b.jpg"></div> 
  <div class="text"> 
    <h2>Александр Сергеевич Пушкин</h2> 
    <p>Александр Пушкин родился в обедневшей дворянской семье 6 июня 1799 года. В раннем детстве он был молчаливым и малоподвижным ребенком — старшая сестра Ольга вспоминала, что до шести лет мальчик «был просто увалень». Начальное образование Пушкин получил 
      дома. Воспитание его ничем не отличалось от общепринятой тогда в дворянских семьях системы: родители нанимали ему гувернеров и учителей из Франции, Германии, Англии, России.</p> 
  </div> 
</div> 
<div class="block"> 
  <div class="icon"><img src="https://sun9-8.userapi.com/c851420/v851420642/6766c/XtlY8FrhWqg.jpg?ava=1"></div> 
  <div class="text"> 
    <h2>Александр Сергеевич Пушкин</h2> 
    <p>Любовь к чтению переросла в попытки<br>создавать собственные тексты. Уже в семь лет Пушкин сочинял на французском языке маленькие комедии, подражая Мольеру. Позже, прочитав произведения Лафонтена, юный автор захотел писать басни. А ознакомившись с «Генриадой» 
      Вольтера, Пушкин задумал поэму в шести песнях: все прочитанные книги вдохновляли начинающего автора.</p> 
  </div> 
</div>

Answer 2

Можно. После "определенного слова" вставляете тег <br>, и всё.

READ ALSO
Как вставить на web страницу тег так чтобы он не работал, но его видел пользователь?

Как вставить на web страницу тег так чтобы он не работал, но его видел пользователь?

Начал изучать html и решил заодно создать сайт на котором я буду конспектировать свои знанияХочу вставлять теги и т

85
как удалить окружность в canvas?

как удалить окружность в canvas?

Столкнулся с такой проблемойУ меня есть переменная myGameArea ,содержащая объект

128
Как использовать значение return в функции

Как использовать значение return в функции

Написать функцию, которая принимает указатель на массив и количество элементов и возвращает минимальный элемент массива (значение и номер...

77