LINUX.ORG.RU

Как заставить пустой тег <p> быть высотой в одну строку?


0

1

Здравствуйте!


Столкнулся с проблемой. Фреймверк Qt, при генерировании HTML-кода редактируемой области, создает такой HTML:

...
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Можно дать команду:</p>

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"></p>

<p style=" margin-top:0px; margin-bottom:0px; margin-left:20px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Courier New'; color:#6a0e07;">$ mencoder -ovc help</span></p>
...

Средний тег <p> - пустой. В браузерах на WebKit он отображается как отдельная пустая строка. А в Opera и Firefox он никак не отображается, то есть верхний и нижний <p> смыкаются.

Если поставить пробел в содержимое среднего тега, то отдельная пустая строка появляется.

Вопрос. Можно ли через CSS настроить свойства элемента <p> так, чтобы он даже будучи пустым, отображался как отдельная пустая строка?

Ссылка на HTML код для экспериментов: http://paste.org.ru/?p2hqh9

★★★★★

Вопрос. Можно ли через CSS настроить свойства элемента <p> так, чтобы он даже будучи пустым, отображался как отдельная пустая строка?

Попробуйте:

p:before
{
 content : " ";
}

AlexCones ★★★
()
Ответ на: комментарий от AlexCones

Так, я сейчас поковырялся, и оказалось что Qt проверяет строки. Для абсолютно пустых он добавляет в style свойство:

-qt-paragraph-type:empty;

а для непустых (даже с одним пробелом) такого свойства не прописывается.

Я могу регвырами на лету заменять эту подстроку на что-нибудь другое. Вопрос - на что?

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от AlexCones

Что-то вроде

Ммм, не работает.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от AlexCones

Нужно именно отследить <p> со стилем "-qt-paragraph-type=empty", так как CSS код в самом первом сообщении вставляет пробелы во все <p> теги, а это не есть хорошо.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от AlexCones

Ага, похоже есть решение:

p {
 min-height: 1em;
}
Xintrea ★★★★★
() автор топика
Ответ на: комментарий от AlexCones

А, нет. Вылез еще один косяк. Вот код:

<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Это заголовок<br /></p>
 <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Это текст</p>

В Qt тегом <br/> кодируется перенос строки без окончания параграфа. Так вот, в WebKit видим пустую строку между этими строками, а в других браузерах - нет.

И снова вопрос - как заставить <br/> отображаться как отдельная строка?

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от Xintrea

>В Qt тегом <br/> кодируется перенос строки без окончания параграфа. Так вот, в WebKit видим пустую строку между этими строками, а в других браузерах - нет.

В WebKit или таки в том, что отображается в текстовом поле в Qt? А то он там какой-то особенный. <br/> это просто разрыв строки, безо всяких пустых строк между предыдущими и последующими строками. Поставь 2 <br/> :}

Deleted
()
Ответ на: комментарий от Deleted

В WebKit или таки в том, что отображается в текстовом поле в Qt?

В текстовом поле Qt - видим всегда переход на новую строку.

В браузерах - как получится. Если один завершающий <br/>, после которого сразу </p>, то перехода на новую строку не увидим.

То есть, код:

<p>Строка рас<br/></p>
<p>Строка два</p>

В Qt отобразится как:

Строка рас

Строка два

А в браузерах отобразится как:

Строка рас
Строка два

Нужно сделать в браузере такое же отображение что и в Qt.

UPD: Черт, щас проверил на чистом примере - в браузерах тоже пустая строка видна... Буду разбираться, почему в моем случае смыкается...

Xintrea ★★★★★
() автор топика

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

Собственно от этого и исходная проблема:

The empty P element represents a paragraph. The exact rendering of this (indentation, leading, etc) is not defined here, and may be a function of other tags, style sheets etc.

Kalashnikov ★★★
()
Ответ на: комментарий от Xintrea

>В текстовом поле Qt

Там какой-то особый уличный HTML. Постоянно какая-то странная ботва выползала… Была мысль заменить на вебкитовый браузерный виджет (т.к. редактирование было не нужно), но так и дело не дошло.

Deleted
()

p не блочный элемент, соответственно маржины, ширина и высота не работают. тебе в помощь: display: block; height: 10px; width: 10px;

anonymous
()
Ответ на: комментарий от Deleted

Там просто коцаный CSS и немного покусанный с краев HTML. А в целом, мне хватило его возможностей для генерации печатных форм отчетов.

GateKeeper ★★
()
5 марта 2014 г.

может быть я тебе помогу

Знаю тема старая , я долго искал метод как можно пропустить строку , ну вот что то такое нашел и получилось вставтье в ту строчку которую хотите пропустиь вот это с большыми пуквами и будет все ок , ну у меня получилось

вот это - <BR>

Rubosh22222
()
4 июля 2014 г.
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.