Всем, доброго времени суток. Назрел интересный вопросик относительно верстки блоков-карточек (по крайней мере я их так называю). Проблема в размере блока с текстом. Как вы увидите на изображении данные блоки разного размера, а соответственно одна строка длинней другой, а менять в коде размеры этих блоков довольно трудоемкий процесс, особенно когда таких карточек много. Вопрос: можно ли делать перенос строки после определенного слова, не прибегая к изменениям размера самого блока? Или же это на грани фантастики?
Чтобы текст выровнять по ширине, необходимо добавить свойство 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>
Можно.
После "определенного слова" вставляете тег <br>
, и всё.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Начал изучать html и решил заодно создать сайт на котором я буду конспектировать свои знанияХочу вставлять теги и т
Столкнулся с такой проблемойУ меня есть переменная myGameArea ,содержащая объект
Написать функцию, которая принимает указатель на массив и количество элементов и возвращает минимальный элемент массива (значение и номер...