Как я могу использовать CSS для вставки разрыва строки после, но не перед элементом?

Например:

HTML:

The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.

Я хочу, чтобы это отображалось:

Быстрая коричневая лисица {BREAK}

перепрыгивает через ленивую собаку.

Я просмотрел свойство display, но display:inline; нигде не разрывается, а display:block ставит разрывы с обеих сторон.

Я также изучил псевдокласс :after, но .break:after{content:"\000A";} в конечном итоге отображается как пробел, а не как перевод строки.


html css newline pseudo-class linefeed
person Matt    schedule 30.09.2013    source источник
comment
jsfiddle.net/bMKrc Понравилось? В этом случае вы также можете просто использовать div.   -  person Jacques ジャック    schedule 30.09.2013
comment
@Jack Нет, без изменения структуры HTML.   -  person Matt    schedule 30.09.2013
comment
Есть ли причина, по которой вы просто не используете <br> в HTML?   -  person Jukka K. Korpela    schedule 30.09.2013
comment
@JukkaK.Korpela Я хочу, чтобы его можно было настраивать независимо от того, есть ли разрыв строки или нет.   -  person Matt    schedule 30.09.2013
comment
Решение SLaks хорошее, но вы можете просто сделать блок отображения span.break. Это проще, меньше кода и совместимо с разными браузерами.jsfiddle.net/bMKrc/1   -  person Jacques ジャック    schedule 30.09.2013
comment
возможный дубликат разрыва строки (например, ‹br›) с использованием только css   -  person user    schedule 04.12.2014

Ответы (2)


arrow_upward
31
arrow_downward

По умолчанию элементы HTML игнорируют пробелы.
Вам необходимо изменить это:

.break:after {
    content:"\000A";
    white-space: pre;
}
person SLaks    schedule 30.09.2013
comment
Спасибо, это работает! Я соглашусь, как только 15 минут истекут. - person Matt; 30.09.2013
comment
в моем случае это не сработало, если я не поместил в него текст, почему?! - person shareef; 28.07.2015
comment
@shareef: О чем ты говоришь? Что случилось? - person SLaks; 28.07.2015
comment
@Slaks Не могли бы вы объяснить, что это делает, пожалуйста? Я только что наткнулся на ответ, и он работает, но я хочу понять, что он делает. (Пожалуйста и спасибо :)) - person TolMera; 22.02.2016

arrow_upward
3
arrow_downward

http://jsfiddle.net/bMKrc/1/

HTML:

The quick brown fox <span class="break"></span> jumps over the lazy dog.

CSS:

.break{
    display:block;
}

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

person Jacques ジャック    schedule 30.09.2013
comment
@Matt То, что ОП что-то говорит, не означает, что это правда. Вы достигаете желаемого результата с блоком отображения. Проверьте мою скрипку, если вы мне не верите. - person Jacques ジャック; 01.10.2013
comment
В случае, если это сбивает с толку, {BREAK} по-прежнему должен быть частью текста. - person Matt; 01.10.2013
comment
О, это не имеет особого смысла, но это не мой проект. Я думал, он показывает, где поставить брейк. Но это не оправдывает вашей грубости. - person Jacques ジャック; 01.10.2013
comment
Хорошо, извиняюсь, если покажусь грубым. Причина, по которой это не имеет особого смысла, заключается в том, что я привел только иллюстративный пример моей проблемы, а не моей реальной проблемы. - person Matt; 01.10.2013
comment
jsfiddle.net делает это очень ясным. Я перепробовал множество способов поместить разрыв строки между привязкой img и Angular {{ }}, которые находятся внутри кнопки, и это единственное, что работает. И это так понятно в коде, особенно если вы вызываете класс lineBreak. - person Mike_Laird; 24.12.2014
comment
..так, почему бы тогда не использовать ‹br›? - person Max Yari; 31.08.2015