x
 
↑
Март
•
3 •

2 •
6 •
•
↓
Евгений Воробьев
21 марта 2013

Вы уже отвечали на похожий вопрос. А как сверстать пример с рисунка? Текст в центре отталкивает двойные боковые линии в зависимости от своих размеров.

Спасибо.

Вот так, например:

Немного букв

<style>
  h1 {
    overflow: hidden;
    position: relative;
    margin: 0;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
  }
  h1:before,
  h1:after {
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    height: 9px;
    top: -1px;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
  }
  h1:before {
      left: -.5em;
      margin-left: -50%;
  }
  h1:after {
    left: .5em;
    margin-right: -50%;
  }
</style>

<h1>Немного букв</h1>

Если текста больше, поможет дополнительный span:

Очень много, много-премного букв

<style>
  h1 > span {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    margin: 0 .2em;
    max-width: 50%;
  }
</style>

<h1><span>Очень много,
    <nobr>много-премного</nobr> букв</span></h1>

Предыдущие советы о декоративных линиях у заголовков:

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Егор Чистяков
21 марта 2013

Опера подгрузила правые полоски не сразу, а только после скрола вниз-вверх, чтобы линейки ушли за верхний край браузера сначала, и то после окончательной подгрузки страницы.
Иван Гришаев
22 марта 2013

Так это же Опера.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
3 • 4 • 4 • 2 •




Недавно всплыло

Какие законы для текста, который будет восприниматься только на слух? 1 • Невозможно собрать портфолио 1 • 1 • 3 •