Задачка на смекалку:
Есть тег p такого вида
<p> <br/> Тут текст <br/> Ещё текст ... </p> и такого: <p> Тут текст <br/> Ещё текст ... </p> Задача - по возможности убить c помощью css тег <br/> (oтступ) в начале первой строки визуально; (не убивая <br/>, которые могут быть далее по тексту) Теги <p> как первого так и второго типа на странице расположены произвольно (как кол-во так и последовательность) |
p:first-line{
line-height:0;
}
|
а можно проще:
p br:first-child {
display: none;
}
|
EmperioAf,
1. Есть и теги <p> без <br> в первой строке 2. В псевдо элементе :first-line допустимы только изменения правил для правил font и line-height Проверка:
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin:0;
padding:0;
}
p {
border:blue solid 1px;
}
p:first-line{
line-height:0;
}
</style>
</head>
<body>
<!-- Вариант-1 тега <p> -->
<p>
<br/>
Тут текст - 1 <br>
Еще текст
</p>
<!-- Вариант-2 тега <p> -->
<p>
Тут текст - 2 <br>
Еще текст
</p>
</body>
</html>
|
не понял, почему нельзя написать так:
p *:first-child {
display: none;
}
? |
EmperioAf,
Для второго тега <p> - убъётся перевод строки |
Deff,
:-?
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
}
p {
border:blue solid 1px;
}
p > br{
display: none;
}
</style>
</head>
<body>
<p>
<br/>
Тут текст - 1
</p>
<p>
Тут текст - 2 <br>
Еще текст
</p>
</body>
</html>
|
Deff,
или надо так?
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
}
p {
border:blue solid 1px;
}
p:first-of-type > br{
display: none;
}
</style>
</head>
<body>
<p>
<br/>
Тут текст - 1
</p>
<p>
Тут текст - 2 <br>
Еще текст
</p>
</body>
</html>
|
рони, поставил бы + (2-й твой) Если б мог
Но теги <p> (как Вариантов 1, так и 2) рандомно разбросаны по странице, хитрость не проходит |
Цитата:
|
EmperioAf,
Ну скриптом задача решается. Вопрос: решается ли через css ? |
Цитата:
Разве в CSS есть инструменты определения, что элемент является TextNode? |
EmperioAf,
Я бы сформулировал так: - Скрыть первую строку в <p> при наличии в ней тега <br> -------------------------------- Тег <br> идёт сразу за тегом родителя <p> Т.е. вид HTML: <p><br>... </p> . |
рони, - отлично, ток в старой опере так: http://savepic.su/5767635.jpg
Наверно нун хаккать для старой оперы(12.15) margin-top ? (компенсировать отступ наездом на предэлемент ?) Да и в Mozilla Firefox так же ====================== В яндексе и Гугол-хроме все без отступа, в Опере и Мозилле с отступом |
Вариант:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
}
p {
border:blue solid 1px;
}
p > br {
display:block;
height:0;
line-height:0;
font-size:0;
}
</style>
</head>
<body>
<p>
Тут текст - 2 <br>
Еще текст
</p>
<p>
<br/>
Тут текст - 1
</p>
<p>
<br/>
Тут текст - 1
</p>
<p>
Тут текст - 2 <br>
Еще текст
</p>
<p>
<br/>
Тут текст - 1
</p>
</body>
</html>
:( не работает В Хроме и Яндексе |
рони,
Да, в Опере работает, осталась Мозилла... Скомпоновать бы мой и твой из поста 14 |
Deff,
нерабочие у меня варианты -- удалил. |
Так решения так и не нашли?)
|
Есть уточнение, что если тег <br> первый, он идёт вплотную после родителя:
<p><br>... |
Любопытно. :)
Попробуйте так:
<!DOCTYPE html>
<html>
<head>
<style>
p {
outline: dashed 1px black;
}
p::first-line {
line-height: 0;
}
p::first-letter {
line-height: 1;
}
</style>
</head>
<body>
<p>
<br>
Hello
<br>
Plunker
<br>!
</p>
<p>
Hello
<br>
Plunker
<br>!
</p>
</body>
</html>
P.S. Не работает в FF, как минимум. |
mikhail.golovkin,
а добавить run для запуска кода? и в опере сами смотрели? |
Цитата:
Цитата:
В FF не работает (ubuntu, windows, android), но решение для FF написано выше самим автором. |
| Часовой пояс GMT +3, время: 09:59. |