Разделение абзаца HTML - PullRequest
Новая
       103

Разделение абзаца HTML

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

Я сейчас создаю сайт. У меня есть один <p>, который я должен разделить для разных строк.

Вот код: 

<p>
  Lorem ipsum - <strong style="color: red;">something.</strong> 
  Lorem ipsum - <strong style="color:blue">something.</strong>\n
  Lorem ipsum - <strong style="color: black;">something.</strong> 
  More lorem ipsum: <strong style="color: indigo;">pls help.</strong>
  Stackoverflow: <strong style="color: purple;">is cool.</strong>
</p>

Я хочу, чтобы он создавал новую строку после каждого тега <strong>, но выводит одну строку. Я пытался \ n, но это не работает.

Также, пожалуйста, не просите меня разделить его на 3 или 4 абзаца, я не должен делать это для этого кода.

Ответы [ 5 ]

2 голосов
/ 03 февраля 2020

Вместо \n, используйте <br>, это решит вашу проблему. Люди используют \n на таких языках программирования, как, например, C и Python.

2 голосов
/ 03 февраля 2020

Самое простое, что нужно сделать, это иметь тег <br/> после каждого сильного тега. Однако лучше добавить этот стиль в CSS. Тег p можно оформить так: 

p {
    white-space: pre-line;
}

См. Также документацию MDN для свойства white-space.

2 голосов
/ 03 февраля 2020

Используйте <br/>, как подсказывает демкович. 

<p>
  Lorem ipsum - <strong style="color: red;">something.</strong><br/>
  Lorem ipsum - <strong style="color:blue">something.</strong><br/>
  Lorem ipsum - <strong style="color: black;">something.</strong><br/>
  More lorem ipsum: <strong style="color: indigo;">pls help.</strong><br/>
  Stackoverflow: <strong style="color: purple;">is cool.</strong><br/>
</p>
1 голос
/ 08 февраля 2020

\ n не для HTML. Попробуйте <br>. Как 2 использовать:

<p>Hello! <br /> How are you? <p>

Что это выводит: 

Hello!
How are you?
1 голос
/ 03 февраля 2020

Мне показалось, что это интересная проблема, и я немного расширил ее.

Первым шагом было добавление класса в тег P, чтобы мы могли дифференцировать и повторно использовать стили для других подобные абзацы.

Затем, исходя из требования, что мы хотим стилистически заменить </strong> на </strong><br/> только в этом классе абзаца, я выбрал псевдоэлемент :: after для сильных тегов в этом классе абзаца . 

p.multicolor strong::after { 
 content: "\A";
 white-space: pre; 
}

Затем, просто для черта, я добавил цвета. 

<html>
<head>
<style> 

p.multicolor strong::after { 
 content: "\A";
 white-space: pre; 
}
p.multicolor strong:nth-of-type(5n+1) {
  color: red;
}
p.multicolor strong:nth-of-type(5n+2) {
  color: blue;
}
p.multicolor strong:nth-of-type(5n+3) {
  color: black;
}
p.multicolor strong:nth-of-type(5n+4) {
  color: indigo;
}
p.multicolor strong:nth-of-type(5n) {
  color: purple;
}
</style>
</head>
<body>

<p class="multicolor">
 Lorem ipsum - 
<strong> something</strong>
 Lorem ipsum - 
<strong> something</strong>
Lorem ipsum - 
<strong> something</strong>
More lorem ipsum: 
<strong> pls help.</strong>
Lorem ipsum - 
<strong> is cool.</strong>
Out of colors :
<strong> start over from red </strong>
Continuing : 
<strong> should be blue </strong>
</p> 

</body>
</html>
...