打破不在<p>标签中工作

Question

我正努力在我的代码中休息一下。根本没有识别中断，只显示一行中的所有文本。

我尝试过使用div，spans和p标签的组合，但仍然存在同样的问题。我只能假设我使用的代码是非法的。如果有人能澄清我哪里出错了，我将不胜感激。感谢

＆＃13;

＆＃13;

<div class="message">
    <div style="margin-top: 5px; font-size: 24px;">
        ALERT
    </div>
    <p>Landscape mode has been disabled in the app<br>
        Please continue by turning your device to protrait<br>
    Thank you
    </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

选项1：在第二行添加一个<br>。

＆lt; br>的主要目的是插入一个换行符。这就是它如何在您的代码中正常工作。如果您需要Thank You上方的空行，只需添加一行br>。

<div class="message">
    <div style="margin-top: 5px; font-size: 24px;">
        ALERT
    </div>
    <p>Landscape mode has been disabled in the app<br>
        Please continue by turning your device to protrait<br><br>
    Thank you
    </p>
</div>

  

选项2：您可以将文本包装在<pre>标记内并设置样式   相应

.no-format{
    font-family: initial;
}

 <div class="message">
    <div style="margin-top: 5px; font-size: 24px;">
        ALERT
    </div>
    <pre class="no-format">Landscape mode has been disabled in the app.
Please continue by turning your device to protrait.

Thank you
    </pre>
</div>

Answer 2

所有display:none可能都有<br>。如果使用它不起作用：

br {display:block}

尝试使用JavaScript覆盖所有display

上的所有<br>属性

演示

var brArray = Array.from(document.querySelectorAll('br'));

brArray.forEach(function(brk, idx) {
  brk.style.display = 'block';
});

/* There's a possibility thisproperty might be somewhere */
p {
  white-space: nowrap;
}

/* More than likely this is the culprit */
.message br {
  display: none;
}

<div class="alert message">
  <div style="margin-top: 5px; font-size: 24px;">
    ALERT
  </div>
  <p>Landscape mode has been disabled in the app <br>Please continue by turning your device to protrait<br> Thank you
  </p>
</div>

<p>Click the text above</p>

Answer 3

就我而言，我已将以下样式应用于我的标签： 空白：前行；

#divWithPreline {
    white-space: pre-line;
    border: solid 2px red;
}

#divWithoutPreline {
    border: solid 2px blue;
}

<div id="divWithPreline">
This is a div

whose content has line breaks

and the <b>white-space pre-line</b> has been applied
</div>
<br>
<div id="divWithoutPreline">
This is a div

whose content has line breaks

and <b>no styling</b> has been applied
</div>