CSS как получить встроенное отображение с псевдоэлементом working :: first-line - PullRequest
Новая
       88

CSS как получить встроенное отображение с псевдоэлементом working :: first-line

0 голосов
/ 20 февраля 2020

Это выглядит очень просто, но я не мог заставить его работать, даже с комбинациями float, inline-block и так далее. Я пытаюсь получить больше места в первой строке, чтобы вторая не "сталкивалась" с заголовком. Я знаю, что ::first-line не работает на inline элементах. Я хочу сохранить этот макет (важен макет, а не дисплей inline, поэтому все, что работает, в порядке). Решение должно иметь широкую поддержку браузера.

Мой дизайн должен оставаться отзывчивым, поэтому текст не должен быть разрезан на разные части. Я мог бы сделать это в javascript и сделать его отзывчивым, запустив скрипт на resize, но я действительно хотел бы избежать этого решения.

РЕДАКТИРОВАТЬ: @ Комментарий TemaniAfif о настройке inline-block к заголовку подходит для моего особого случая, но для любопытства и будущих читателей он не отвечает напрямую за псевдоэлемент. Например, если кто-то хочет использовать заглавные буквы или изменить цвет, я чувствую, что вопрос остается в силе, поэтому я редактирую фрагмент. 

.heading {
  padding: 5px;
  background-color: blue;
  color: white;
}
.content {
  margin-left: 5px;
}
.content::first-line {
  line-height: 2;
  text-transform: uppercase;
  color: red;
}
.block {
  display: block;
}
<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

<br><br>
<b>Display is out now that first-line works because of block (or inline-block) + margin left out too:</b>
<br><br>

<span class="heading">header: </span>
<span class="content block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

Вы на самом деле не описали, что и как следует выравнивать, но, комбинируя float:left; и отрицательную настройку margin-top для этого первого слова span (также со значениями, отличными от того, что я использовал ниже), вы должны быть в состоянии получить то, что вы хотите: 

.heading {
  float:left;
  margin: -10px 0 0 0;
  padding: 5px;
  background-color: blue;
  color: white;
}
.content {
  margin-left: 5px;
}
<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
1 голос
/ 20 февраля 2020

Вы можете попробовать display: inline-block; в вашем .heading 

.heading {
  padding: 5px;
  background-color: blue;
  color: white;
  display:inline-block;
}
.content {
  margin-left: 5px;
}
.content::first-line {
  line-height: 2;
}
.block {
  display: block;
}
<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

<br><br>
<b>Display is out now that first-line works because of block (or inline-block) + margin left out too:</b>
<br><br>

<span class="heading">header: </span>
<span class="content block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
0 голосов
/ 20 февраля 2020 

.box-text { position:relative;}
.box-text p::first-line { display:inline-block; position:relative; color:#ccc;}
.box-text p { display:inline-block; position:relative;}
<div class="box-text">

<p>header:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class="box-text">

<p>header:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class="box-text">

<p>header:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
...