Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Задачка на смекалку: (https://javascript.ru/forum/xhtml-html-css/56848-zadachka-na-smekalku.html)

Deff 06.07.2015 19:55

EmperioAf,
Ну скриптом задача решается. Вопрос: решается ли через css ?

EmperioAf 06.07.2015 20:12

Цитата:

Сообщение от Deff
EmperioAf,
Ну скриптом задача решается. Вопрос: решается ли через css ?

ну то есть задача заключается в том, что нужно отличить с помощью селектора отличить пробел+<br> от пробел+текст
Разве в CSS есть инструменты определения, что элемент является TextNode?

Deff 06.07.2015 20:21

EmperioAf,

Я бы сформулировал так: - Скрыть первую строку в <p> при наличии в ней тега <br>

--------------------------------
Тег <br> идёт сразу за тегом родителя <p>

Т.е. вид HTML: <p><br>... </p>
.

Deff 06.07.2015 20:53

рони, - отлично, ток в старой опере так: http://savepic.su/5767635.jpg
Наверно нун хаккать для старой оперы(12.15) margin-top ? (компенсировать отступ наездом на предэлемент ?)
Да и в Mozilla Firefox так же
======================
В яндексе и Гугол-хроме все без отступа, в Опере и Мозилле с отступом

Deff 06.07.2015 21:29

Вариант:
<!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>


:( не работает В Хроме и Яндексе

Deff 06.07.2015 22:01

рони,
Да, в Опере работает, осталась Мозилла...
Скомпоновать бы мой и твой из поста 14

рони 06.07.2015 23:00

Deff,
нерабочие у меня варианты -- удалил.

filler 07.07.2015 13:07

Так решения так и не нашли?)

Deff 11.07.2015 16:15

Есть уточнение, что если тег <br> первый, он идёт вплотную после родителя:
<p><br>...

mikhail.golovkin 18.08.2015 08:55

Любопытно. :)

Попробуйте так:
<!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, как минимум.


Часовой пояс GMT +3, время: 13:09.