Как обвести текст по контуру при переносе на две строки?
При ресайзе экрана текст переносится на вторую строку, но рамка у тега идет на всю ширину строки. Есть ли способ проверсти рамку именно по периметру текста?
Дополнительно:
Есть ли способ
есть
сейчас как сделано? в песочницу можно?
Буду очень благодарна, потому что даже не ожидала, что не смогу сходу сделать
Ответы:
На мой взгляд, проще и красивее сделать на всю ширину
Но если нужно получить ожидаемое, то вариант - явно разделить строки (например, в инспекторе я нажал shift+enter) и указать для ссылок white-space: pre-line. Соответственно, white-space можно менять в медиа запросе.
<a href="#">Детское игровое и спортивное оборудование</a> |
<a href="#">Детское игровое и спортивное оборудование</a>
.goods-cat__labels > a { white-space: pre-line; } |
.goods-cat__labels > a { white-space: pre-line; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обведения текста по контуру при переносе на две строки можно использовать следующий подход:
1. Создайте контейнер с заданным размером, в котором будет отображаться текст.
2. Разделите текст на две строки, если он не помещается в одну.
3. Используйте CSS свойство `text-stroke` для обводки текста.
4. Примените стили для текста, чтобы он выглядел как контур.
Пример кода на HTML и CSS:
<div class="text-container"> <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div>
.text-container { width: 200px; height: 50px; display: flex; justify-content: center; align-items: center; } .text { font-size: 20px; color: transparent; -webkit-text-stroke: 2px black; }
В данном примере текст будет обведен черным контуром с толщиной 2px. Вы можете настроить размер контейнера, шрифт, толщину контура и другие стили под свои потребности.
Таким образом, вы можете легко обвести текст по контуру при переносе на две строки, используя CSS свойство `text-stroke` в сочетании с другими стилями.