Css заголовок в одну строку: Как отобразить два заголовка в одной строке? — Хабр Q&A

Leave a Comment / Css / By /

html — Как сверстать заголовок с подчеркиванием оставшейся части строки?

Вопрос задан

Изменён 6 лет 5 месяцев назад

Просмотрен 219 раз

Здравствуйте. Возможно ли сверстать без js вот такой заголовок (собственно интересует подчеркивание оставшейся части строки):

Фон у заголовка должен быть прозрачным. и хотелось бы обойтись без вложенных спанов, т.к. хочется дать возможность контент-менеджеру добавлять такие заголовки в текст просто выбрав класс из списка.

  • html
  • css
  • вёрстка

1

Примерно то же, что и у @FAngel, но может быть немного полегче:

body {
    background: #ccc;
}

h2 {
    position: relative;
    color: brown;
    font: 20px sans-serif;
    text-transform: uppercase;
    overflow: hidden;
}
h2:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
}
<h2>Некий заголовок некоего раздела страницы</h2>

Демо: http://jsfiddle. net/2b225ehn/

Можно использовать такое вот решение:

.test:after {
     display: inline-block;
      width: 100%;
      border-bottom: solid 1px #000;
      content: '';  
      margin-top: 13px;
      margin-left: 3px;
      position: absolute;
}

span.test {
  display: block;  
  position: relative;
  overflow: hidden;
}
<span>text</span>

В общем, то — то же самое что и в ответе от Special, но работает с заголовком в несколько строк (подчеркивание переносится на нижнюю строчку) и не добавляет скрол снизу

Пример тут: http://jsfiddle.net/tk3bduop/3/

1

Если я вас правильно понял, то вот решение http://jsfiddle.net/juttnayo/

2

Заголовок должен умещаться в одну строку, иначе скролл.
http://jsfiddle. net/2s2nqdn7/

<h2>Какой-то заголовок&#8239;</h2>

Как избавиться от пробела для отступа не придумал. Но сама идея работает и без него.

h2 {
  display: table-row;
  white-space: nowrap;
}
h2:after {
  content: "";
  border-bottom: 1px solid;
  width: 100%;
  display: table-cell;
  position: relative;
  bottom: 8px;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Колонки | Основы верстки контента

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Создание колонок с текстом, до прихода стандарта CSS3, было достаточно сложным делом. Приходилось использовать различные свойства позиционирования и следить за тем, чтобы колонки не «развалились» в процессе добавления информации.

Посмотрите на пример выше. При всей визуальной легкости, создание такого макета вызывало трудности. Чаще всего проблема возникала в переносе текста в колонках. Для решения этой задачи использовали несколько блоков со строго отведенной информацией. Ни о каких автоматических переносах или изменении статьи не могло идти и речи.

Сейчас же эта задача решается всего двумя(!) свойствами. Эти и некоторые другие свойства мы рассмотрим в данном уроке.

Создание колонок

Для создания колонок в CSS существует свойство column-count. Оно полностью соответствует своему названию. Достаточно указать количество колонок и браузер все сделает за вас.

<article>
  <p>
    David Bowie, original name David Robert Jones, (born January 8, 1947,
    London, England—died January 10, 2016, New York, New York, U. S.), British
    singer, songwriter, and actor who was most prominent in the 1970s and best
    known for his shifting personae and musical genre hopping.
  </p>
  <p>
    To call Bowie a transitional figure in rock history is less a judgment than
    a job description. Every niche he ever found was on a cusp, and he was at
    home nowhere else—certainly not in the unmoneyed London suburb where his
    childhood was as dingy as his adult life would be glitzy. While this born
    dabbler’s favourite pose was that of a Great Artist beguiled by rock’s
    possibilities as a vehicle, in truth he was more a rocker drawn to artiness
    because it worked better than any other pose he had tried (not that he was
    not eclectic—he admired Anthony Newley and Jacques Brel and studied mime
    with Lindsay Kemp).
  </p>
</article>

.columns-2 {
  column-count: 2;
}

Важно: информация внутри колонок обрабатывается «как есть». Это значит, что все отступы сохраняются. В случае с параграфами стоит сбрасывать верхний отступ. Это позволит держать первый параграф на одной линии с другими колонками.

.columns-2 p {
  margin-top: 0;
}

По умолчанию колонки делятся равномерно внутри контейнера и суммарно они займут все доступное пространство. Повлиять на это поведение можно свойством column-width

— с его помощью задается оптимальная ширина колонок. Слово «оптимальная» является главным. В отличие от свойства width, здесь не устанавливается четкая ширина, и, если места в контейнере хватает, то колонки будут растягиваться на всю доступную ширину.

Зачем нужно такое поведение? Представьте, что у нас есть длинный текст в две колонки. Например, как в первом изображении в этом уроке. Без указания оптимальной ширины браузер будет выстраивать две колонки при любой ширине устройства. Если эта ширина будет 300 пикселей, то колонки поделятся по 150 пикселей. Ужасная картина.

Чтобы не допустить такого, можно выставить оптимальную ширину. Если браузер не сможет выдать такую ширину колонке, то контент будет выстроен в одну колонку. Вот уже и адаптивность. А ведь это только первые уроки 🙂

.columns-2 {
  column-count: 2;
  column-width: 250px;
}

Эту запись можно сократить. В CSS используется свойство columns для сокращения свойств column-count и column-width. Последний пример можно записать так:

.columns-2 {
  columns: 250px 2;
}

Первым значением записывается ширина колонки, а вторым их количество

Перейдите на сайт CodePen и попробуйте сузить окно браузера. В определенный момент колонки уйдут, и весь текст будет выстроен в одну колонку.

Отступы между колонками

В примерах выше вы могли заметить, что браузеры автоматически проставляют отступы между колонками. Чаще всего не стоит доверять браузеру. Одно из правил верстки и программирования: явное лучше неявного. По умолчанию расстояние между колонками равно 1em. Единица измерения em отсчитывается от размера шрифта. Если размер шрифта равен 16 пикселям, то и 1em равен 16 пикселям.

Задать отступы между колонками можно с помощью свойства column-gap. Кстати, это свойство вы встретите еще много раз. Оно достаточно универсально.

Вы можете использовать различные единицы измерения внутри свойства column-gap. Для примера возьмем значения в пикселях. В будущих уроках вы познакомитесь и с другими единицами измерения.

.columns-2 {
  columns: 250px 2;
  column-gap: 30px;
}

Попробуйте изменить значение свойства column-gap и посмотрите, как это повлияет на колонки.

Границы между колонками

Модуль CSS Multi-column Layout позволяет задавать визуальную границу между колонками. Если вы знакомы со свойством border, которое устанавливает границы у блоков, то поведение вам будет знакомо. Раньше создание границ между колонками необходимо было реализовывать самостоятельно, что тоже не радовало верстальщиков.

Для создания границы используется свойство column-rule, которое является краткой записью следующих свойств:

  • column-rule-width — ширина границы.
  • column-rule-style — тип границы. Значения совпадают со значениями свойства border.
  • column-rule-color — цвет границы.

Вы можете указывать как три отдельных свойства, так и краткую запись.

.columns-2 {
  columns: 250px 2;
  column-gap: 30px;
  column-rule: 2px solid black;
}

Добавление контента в несколько колонок

Если представить себе газету, то там не всегда текст идет строго по колонкам. Частая ситуация — заголовок, который накладывается на все колонки, как бы разделяя их по горизонтали.

Для разделения колонок используется свойство column-span. Оно принимает всего два значения:

  • none — значение по-умолчанию. Текст находится просто внутри колонок.
  • all — текст «выходит из колонки» и разделяет их.
h3 {
  text-align: center;
  column-span: all;
}
.columns-2 {
  columns: 250px 2;
  column-gap: 30px;
  column-rule: 2px solid black;
}

Перенос колонок

В примерах можно заметить, что все элементы внутри колонок переносятся автоматически. Это неплохое решение для текста, но если существуют небольшие блоки, и нам явно не нужно, чтобы информация внутри них переносилась, то без помощи сторонних свойств не обойтись. Как же контролировать перенос контента внутри колонок? Для этого существует несколько правил, о которых поговорим в этом разделе.

  • break-before
  • break-after
  • break-inside

По названию уже можно понять, что речь идет о переносе до/после и внутри. Все три свойства принимают огромное количество значений, так как рассчитаны не только для колонок, но и для вывода на печать.

При работе с CSS Multi-column Layout нас больше всего интересует значение avoid, которое запрещает перенос.

Взгляните на элемент figure. Он состоит из изображения и подписи к нему. Для наглядности обведем его границей и увидим, что изображение находится в одной колонке, а подпись уже в другой. Это плохой вариант верстки текста. Без границы совершенно непонятно что текст — лишь подпись изображения, а не самостоятельный текст.

Этот перенос происходит внутри элемента figure. Для запрета такого переноса можно воспользоваться свойством break-inside и запретить перенос внутри данного элемента.

figure {
  border: 1px solid;
  break-inside: avoid;
}

Добавление эллипса к усеченному тексту с помощью CSS: однострочные и многострочные параметры скрытый

. Таким образом, это не очень много говорит пользователю и не очень хорошая идея. Если вы хотите указать читателю, что текст был намеренно обрезан, неплохо добавить эллипс или 3 точки, например…

Так как же это сделать, как создать автоматические эллипсы? Опять же, это довольно легко для однострочных.

Однострочный Truncate

Отдельные строки, которые необходимо установить для свойства text-overflow равным многоточию.

Если элементы, обертывающие div, не имеют явной высоты, вам также необходимо добавить пробел: nowrap; , который лучше всего использовать в большинстве случаев. Пустое пространство: nowrap проверяет, не слишком ли узка ширина вашего div для длины текста, чтобы текст не переносился на следующую строку. Вот код, необходимый для отображения h2 в div с многоточием на мобильном устройстве. Я также уменьшил размер шрифта, поэтому он отображается только на очень немногих страницах, но гарантирует, что дизайн не сломается.

 #заголовок h2 {
    ширина: 325 пикселей;
    размер шрифта: 0,85 em;
    переполнение: скрыто;
    переполнение текста: многоточие;
    пробел: nowrap;
}

Ну, это было легко

Многострочный Truncate

Многострочный не намного сложнее, это комбинация 3-х свойств. Решением является собственное свойство CSS, которое ограничивает текст блочного контейнера заданным количеством строк при использовании в сочетании с отображением : -webkit-box и -webkit-box-orient: vertical;

Несмотря на то, что это проприетарный код, его поддержка в браузерах составляет 96 % согласно Can I use.

 

 .views-field-title a {
    цвет: #125f04;
    текстовое оформление: нет;
    размер шрифта: 0,85 em;
    переполнение: скрыто;
    дисплей: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: вертикальный;
    /* не требуется, хотя в некоторых документах указано, что это необходимо
    переполнение текста: многоточие; */
}

1 Размер шрифта в этом примере установлен на 0,85 em, так как ссылки заключены в h3. Это будет переработано в ближайшие недели, поскольку тема разработана вокруг контента. См. главную страницу этого сайта на мобильных устройствах или в узком разрешении.

 

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

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

Последняя мысль об усечении текста: вы должны делать это только в крайних случаях, так как если каждый элемент должен быть усечен, вам следует подумать о перепроектировании пользовательского интерфейса.

Теги

CSS

Доступность

Есть ли стандартный способ разбить заголовок на несколько строк в определенной точке? — CSS

Симевидас

#1

Сандрина Перейра пишет в Твиттере:

Это распространенный запрос от команды дизайнеров на целевых страницах. Более «броско» разбить большой заголовок на 2-3 строки по конкретному слову. Пример: «Внутренние лучшие практики»

Таким образом, автор хотел бы точно контролировать, где заголовок разбивается на две строки (после первого слова или после второго слова). Можно ли сказать, что это допустимый вариант использования? Если да, то как этого добиться в HTML или CSS? Если нет стандартного способа сделать это, должен ли он быть?

Малвоз

#2

Оберните «лучшие практики» в элемент и присвойте ему display: block ?

симевидас

#3

Думаю, мы нашли неплохое решение в Твиттере.

  
Внутренний 
 лучшие практики
 
 
 ч) {
  пробел: до строки;
}

Демо: https://jsbin.com/xeroxoc/edit?html,css,output

1 Нравится

mkay581

#4

Возможно, я просто старомоден, но можно ли в этом случае не использовать тег
?

1 Нравится

Малвоз

#5

Спецификация HTML гласит:

Элементы

br должны использоваться только для разрывов строк, которые фактически являются частью контента, например, в стихах или адресах.

И в разделе проблем доступности MDN для элемента говорится, что вспомогательные технологии могут явно объявлять разрыв строки, что, вероятно, не то, что вам нужно.

симевидас

#6


 — это семантический разрыв строки, поэтому он подходит только для текстовых блоков, таких как адреса и стихи. В моем случае перенос строки чисто презентационный (текст не помещается в одну строку, поэтому текст переносится на другую строку). Я просто хочу иметь возможность контролировать, где происходит разрыв строки.

мкэй581

#7

Адреса и стихи являются примерами. Это не единственное, для чего вы можете его использовать. Вы можете добавить атрибут aria для отключения программ чтения с экрана.

симевидас

#8

В адресах и стихах разрывы строк являются частью содержания. Если их удалить, смысл текста изменится.

В моем примере разрыв строки в заголовке не является частью содержимого. Вы можете удалить его, а заголовок останется прежним.

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

лиамкин

#9

Адрес часто (например, на фирменном бланке) печатается в одну строку; в семантика заключается в том, что адрес состоит из разных частей, часто называемых строками

  • адресов улиц, городов, регионов, стран, провинций или штатов и и так далее — и в элементе br нет абсолютно ничего семантического там это всего лишь один из способов форматирования. Используйте элемент «линия» или соответствующие именованные элементы, если вы хотите облегчить дальнейшее обработка, если вы хотите уловить смысл, семантику.

В заголовке вам может понадобиться адаптивный разрыв строки, поэтому вы хотите указать первичные и вторичные условные точки останова в зависимости от te свободного места. HTML и CSS не так хороши в этом сегодня к сожалению, но вы могли бы использовать элементы br с атрибутами класса с указанием первичного или вторичного, и использовать медиа-запросы, чтобы сделать прерывается в зависимости от доступного места.

Если вы хотите разбить фразу, и нет проблем с вторичным разрывом, вы можете использовать span class=»phrase» и управлять разрывом строки таким образом. Вы также можете использовать один из «предварительных» вариантов, например. предварительно обернуть и иметь новая строка, где вы хотите сделать перерыв.


, кстати, для стихов катастрофически не годится, так как нельзя легко сделать отступ после элемента br — вам нужен элемент строки. HTML никогда не удавалось взобраться на вершины поэзии. Там в технической документации не так много поэзии, и нет простого способа скорректировать строки с переносом вправо с помощью разделителя [ используя одну и ту же строку как следующий, если есть место, ни какой-либо стандартный способ отметить автора стихотворение и отличить его от транскрибатора. Дублинское ядро, но нет стандартного места для его размещения, кроме cite, которое само по себе является источником вызывает значительную путаницу из-за неясности его Спецификация.

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

симевидас

#10

Адрес можно написать одной строкой, но тогда нужно использовать запятую для разделения частей.

Добавить комментарий

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