CSS разрыв строки из трех частей, если не подходит под размер окна / родительского элемента

Question

CSS разрыв строки из трех частей, если не подходит под размер окна / родительского элемента

0

Period: From May 2013 To April 2013

Как я могу сделать этот текст для отображения на одном или автоматическом разрыве на три строки, если текст не соответствует размеру окна/родителя

Period:
From May 2013
To April 2013

FIDDLE

Вывод

Его невозможно сделать с помощью чистого CSS

Мое простое решение - JS и его обновление один раз при загрузке

FIDDLE с JS

Если кто-то может сделать лучше - пожалуйста, предоставьте демоверсию

Dmitry 29 нояб. 2013, в 12:51

Источник

0

Вы хотели бы сделать это через javascript / jquery или используя только CSS? также лучше, если вы предоставите пример через jsfiddle.net, jsbin.com с внешним контентом и т. д.
Ravimallya 29 нояб. 2013, в 11:25
0

CSS только лучше, JS не удобно
Dmitry 29 нояб. 2013, в 11:27
0

Можно ли иметь две строки «Период: с мая 2013 года» и «До апреля 2013 года», если окно может содержать это, или вы хотите избежать этого? Кроме того, дата «до» предшествует дате «от», верно?
Mr Lister 29 нояб. 2013, в 11:32
0

насколько я знаю, невозможно посчитать символы через css. если вы можете изменить разметку, вы можете добавить <br/> вручную. В противном случае вам придется использовать метод javascript / jquery, чтобы разбивать строки.
Ravimallya 29 нояб. 2013, в 11:32

Показать ещё 2 комментария

Теги:

html

css

html5

3 ответа

Ещё вопросы

Вы хотели бы сделать это через javascript / jquery или используя только CSS? также лучше, если вы предоставите пример через jsfiddle.net, jsbin.com с внешним контентом и т. д.
Можно ли иметь две строки «Период: с мая 2013 года» и «До апреля 2013 года», если окно может содержать это, или вы хотите избежать этого? Кроме того, дата «до» предшествует дате «от», верно?
насколько я знаю, невозможно посчитать символы через css. если вы можете изменить разметку, вы можете добавить <br/> вручную. В противном случае вам придется использовать метод javascript / jquery, чтобы разбивать строки.

Matthew Trow · Answer 1 · 2013-11-29T08-47-00.000Z

Вы можете обернуть отдельные "части" в теге span.

http://jsfiddle.net/HwZ23/1/

<p class="period"><span>Period:</span> <span>From May 2013</span> <span>To April 2013</span></p>



.period span {
    display: inline-block;
}

Я должен отметить, что это "сломается" в правильном месте, однако оно не всегда будет разбиваться на три строки в зависимости от разрешения экрана. Для этого вам нужно будет использовать медиа-запросы. С помощью медиа-запросов с требуемой разрешающей способностью вы объявите интервал.period как отображение: block

Это очень близко! Но, когда я изменяю размер кадра, строка разделяется на 2 строки, если я продолжаю изменять размер - тогда до 3 строк, но мне нужно только 1 строка или 3, без стадии 2 строки
Это довольно сложно достичь без использования медиа-запросов. Это довольно хорошая статья, которая объяснит, что они из себя представляют и как их использовать: mobile.smashingmagazine.com/2010/07/19/…

Johny · Answer 2 · 2013-11-29T10-23-00.000Z

Вы также можете принудительно использовать это, используя неперекрывающиеся пробелы:

Period:
From&nbsp;May&nbsp;2013
To&nbsp;April&nbsp;2013

Да, но учтите, что это изменит фактическое содержание страницы. Например, пользователь больше не сможет выполнять поиск по тексту «С мая».

Bipin Kumar Pal · Answer 3 · 2013-11-29T10-19-00.000Z

<div><span>Period:</span><span>From May 2012</span><span>To May 2013 </span>

div span {
    display: inline-block;
}