Предотвратить разрыв строки с помощью тега span и p

Question

Предотвратить разрыв строки с помощью тега span и p

0

У меня есть CSS, который вставляет тире, unicode U + 2014 -, чтобы дать хорошее форматирование на моем сайте раньше указанного источника. Раздражающе после этого он ломает новую линию (я пробовал переходить от span к div, но не использовать).

Дерево документов выглядит так:

<span class="source">...</span>
<p>Source author, text goes here etc. etc.</p>

Вычисленный стиль для строки span включает display:inline, тогда как вычисленный стиль для p имеет display:block, который, как я предполагаю, может вызвать новую строку?

Я читаю через соответствующий CSS и не вижу никакой причины, почему он должен начать новую строку, у меня нет \ A в содержании, как в этом вопросе...

Может ли какой-нибудь CSS-свисток указать на то, что мне не хватает? Возможно, требуется альтернативная реализация ::before псевдоэлементом?

Здесь используется CSS

div.source:before{content:"\2014";margin-left:0.9em;margin-right:0.9em; white-space:nowrap;}#content

(Я вставил белое пространство: nowrap некоторое время назад, пытаясь исправить это, но ничего не сделал с новой строкой)

Louis Maddox 20 окт. 2013, в 18:06

Источник

0

Вы пробовали p{display: inline;} ? Является ли это то , что вы хотите?
Harry 20 окт. 2013, в 15:29
1

Это связано  что по умолчанию  является элементом уровня блока, что означает, что он будет занимать 100% ширины своего родительского элемента, и поэтому переместится на новую строку. Возможно, предложение @ Гарри сработает.
Terry 20 окт. 2013, в 15:31
0

Снялся, когда я прочитал это, потому что это в основном решение, и я думаю, что я идиот, но потом я попробовал это, и есть несколько тегов (т.е. больше абзацев после того, как источник указан), поэтому я просто пытаюсь выяснить, если мне нужен nth-of-type / first-child, чтобы отображался только первый: inline, это выглядит слишком сложным ...
Louis Maddox 20 окт. 2013, в 15:39
0

По какой-то причине он портит поля p, используя nth-of-type, избавившись от полосы прокрутки в секции blockquote внизу, но собираясь попробовать предложение Стива ... div.source p: nth-of-type (1) {display :в линию}
Louis Maddox 20 окт. 2013, в 15:41
1

@lmmx: Как я только что упомянул в ответе Стива. Его подход лучше, но будьте осторожны со списком браузеров, которые вы хотите поддерживать. Если IE <9 находится в вашем списке, то :before :nth-child т. Д. Вызовут проблемы.
Harry 20 окт. 2013, в 15:42
0

Но если это так, то оригинальное решение также не будет работать. На самом деле, мое решение будет ухудшаться изящно, потому что пункт будет работать как обычно.
Steve 20 окт. 2013, в 15:46
0

Вы также можете попробовать эту версию. Он использует + (соседний селектор брата) и поэтому применяется только к тегу  непосредственно после  и IE лучше поддерживает этот селектор.
Harry 20 окт. 2013, в 15:48

Показать ещё 5 комментариев

Теги:

html

css

2 ответа

0

Почему бы вам не добавить class="source" непосредственно к тегу p, а не добавить ненужный span?

Поведение, которое вы видите сейчас, правильное, поскольку элементы p по умолчанию являются элементами уровня блока. Вы можете дать ему стиль display: inline; но, как я уже упоминал выше, было бы лучше избавиться от span и добавить класс в тег p.

Steve 20 окт. 2013, в 13:11

1

Я согласен. Хотя я просто пытался решить проблему, вы упомянули лучший подход к ее решению. Однако, единственное, что нужно проверить, - это поддержка браузером псевдо :before (IE приходит на ум: D)
Harry 20 окт. 2013, в 15:40
0

Я хотел бы использовать это, но я использую Tumblr для управления своими сообщениями (хотя я стараюсь скрыть это), и он не позволяет вам изменять атрибуты p-уровня в теме. Исходный раздел выглядит следующим образом: {block: Source} <div class = "source"> {Source} {/ block: Source}
Louis Maddox 20 окт. 2013, в 15:46
0

Есть ли способ применить class = "source" к дочерним элементам из тега div?
Louis Maddox 20 окт. 2013, в 15:47

Показать ещё 1 комментарий

Ещё вопросы

Вы пробовали p{display: inline;} ? Является ли это то , что вы хотите?
Это связано  что по умолчанию  является элементом уровня блока, что означает, что он будет занимать 100% ширины своего родительского элемента, и поэтому переместится на новую строку. Возможно, предложение @ Гарри сработает.
Снялся, когда я прочитал это, потому что это в основном решение, и я думаю, что я идиот, но потом я попробовал это, и есть несколько тегов (т.е. больше абзацев после того, как источник указан), поэтому я просто пытаюсь выяснить, если мне нужен nth-of-type / first-child, чтобы отображался только первый: inline, это выглядит слишком сложным ...
По какой-то причине он портит поля p, используя nth-of-type, избавившись от полосы прокрутки в секции blockquote внизу, но собираясь попробовать предложение Стива ... div.source p: nth-of-type (1) {display :в линию}
@lmmx: Как я только что упомянул в ответе Стива. Его подход лучше, но будьте осторожны со списком браузеров, которые вы хотите поддерживать. Если IE <9 находится в вашем списке, то :before :nth-child т. Д. Вызовут проблемы.
Но если это так, то оригинальное решение также не будет работать. На самом деле, мое решение будет ухудшаться изящно, потому что пункт будет работать как обычно.
Вы также можете попробовать эту версию. Он использует + (соседний селектор брата) и поэтому применяется только к тегу  непосредственно после  и IE лучше поддерживает этот селектор.
Я согласен. Хотя я просто пытался решить проблему, вы упомянули лучший подход к ее решению. Однако, единственное, что нужно проверить, - это поддержка браузером псевдо :before (IE приходит на ум: D)
Я хотел бы использовать это, но я использую Tumblr для управления своими сообщениями (хотя я стараюсь скрыть это), и он не позволяет вам изменять атрибуты p-уровня в теме. Исходный раздел выглядит следующим образом: {block: Source} <div class = "source"> {Source} {/ block: Source}
Есть ли способ применить class = "source" к дочерним элементам из тега div?

Harry · Accepted Answer · 2013-10-20T14-04-00.000Z

0

Лучший ответ

Вы можете попробовать использовать соседний селектор (+), как показано ниже. Он поддерживается в IE> = 7.

HTML:

<span class="source">&mdash;</span>
<p>Source author, text goes here etc. etc.</p>
<p>Source author, text goes here etc. etc.</p>

CSS:

.source + p{display: inline;} 
/* applies inline style to only the <p> tag directly following a tag with class=source */

Демо-версия скрипта | Поддержка браузера

Harry 20 окт. 2013, в 14:04

0

иметь тот же эффект, что и div.source p: nth-of-type (1) {display: inline}?
Louis Maddox 20 окт. 2013, в 16:01
0

Да, это так. Вы проверяли скрипку?
Harry 20 окт. 2013, в 16:02
0

Да, это немного забавно на моем реальном сайте. Я просто вижу, что нужно изменить
Louis Maddox 20 окт. 2013, в 16:05
0

Проверьте эту скрипку. Это также помещает черту как требуется. Я не уверен, что еще вызывает проблемы на вашем сайте. Если вы можете обновить скрипку с вашим точным кодом, который будет полезен при анализе. ( — совпадает с \2014 )
Harry 20 окт. 2013, в 16:06
0

Да, это не работает для меня, используется именно так, как вы написали
Louis Maddox 20 окт. 2013, в 16:11
0

Это странно, приятель. Вы в состоянии смоделировать проблему в скрипке? Кроме того , я думаю , вы бы отметили div отсутствуют , прежде чем .source в моем ответе. Это потому, что элемент с class=source в нашем случае является span .
Harry 20 окт. 2013, в 16:11
0

Да, вот это jsfiddle.net/TUyVC/6
Louis Maddox 20 окт. 2013, в 16:19
0

@lmmx: Ах, ваш  находится внутри  и не является родным братом. Это причина.
Harry 20 окт. 2013, в 16:20
0

Может заставить его работать без селектора + с помощью nth-of-type (1), было бы интересно узнать, что идет не так, хотя jsfiddle.net/qhNzz
Louis Maddox 20 окт. 2013, в 16:21
0

Попробуйте эту скрипку . Проблема заключалась в том, что + выбирает родного брата, но, как упоминалось в моем предыдущем комментарии, здесь  является дочерним, а не родным братом  . Кроме того, nth-of-type(1) во многом совпадает p:first-child . (Примечание: first-child не поддерживается в IE7)
Harry 20 окт. 2013, в 16:21

Показать ещё 8 комментариев