首页 > 解决方案 > 如何在 CSS 中添加换行符

问题描述

我正在使用允许自定义 CSS 调整特定设置的 3rd 方应用程序。这是从 Chrome 中提取的数据

<textarea readonly="readonly" 
disabled="disabled" 
class="cComment TextEntry" 
id="C050590L" 
name="@C050590L" 
type="Text" maxlength="4000" 
rows="12" 
style="width:100%">2020-01-30: On x710 Controller types, 1GbE is not supported with DAC Cable. You can ONLY get 1GbE support with Optical cable/ 1G Transceiver.*  2020-02-13: On X710 Controller types, the link capabilities and autoneg are inconsistent on different firmware releases. 
The changes that were made between various FW versions are confidential and cannot be shared externally but the output you see is on your particular FW is what should be considered appropriate.*  2018-02-07: On xl710 controllers, the BOOTUTIL will display 40GbE under Series. This is correct since this chip splits the signal to 4x10GbE.*  2020-01-28: We have confirmation from Intel that LLDP on FW 7.0 should stay persistent once disabled (even after the reboot). For this, we need the latest Intel driver (24.5 or later).*
</textarea>

我希望在我的自定义 css(cComment)中做的是在样式中提到的每个日期之后开始一个新行。这可以根据此处提供的代码来计算吗?

.cComment {
    text-transform: uppercase;
    color: red;
    }

标签: css

解决方案


您不能直接将 css 添加到给定 HTML 元素内容的不同部分,而无需修改您的 HTML 内容。可以通过四种方式添加空格:

  1. 在需要的地方将<br/>标签放入内容中。
  2. 使用显示属性:块级元素从新行开始,您需要将内容放在要从下一行开始的单独 HTML 元素(例如 div)中。
  3. 使用“white-space: pre”,它可用于保留空格并准确显示您在 HTML 标记中使用换行符编写内容的方式。
  4. 对你总是想从新行开始的内容使用标签,因为 div 是块行元素。

对于上述所有这些方式,您将需要访问您的 HTML 内容,因为它需要进行一些修改才能将从日期开始的行变为新行。


推荐阅读