如何在 html 框中使用 CSS 添加多个文本？ [复制]答案

【问题标题】：How to add multiple texts using CSS in an html box? [duplicate]如何在 html 框中使用 CSS 添加多个文本？ [复制]
【发布时间】：2019-11-26 17:58:40
【问题描述】：

我有一个 HTML 框，我想使用 CSS 在新行中添加更多文本。

我尝试创建另一个 HTML 标记，但它只是变得凌乱而不是框的一部分。还尝试了content: "ex";，但没有任何效果。

.Device1 {
  position: relative;
  left: 8%;
  top: 20px;
  text-align: center;
}

&lt;div class="Device1" style="width: 400px; height: 100px;border: 1px solid #000000;"&gt;Device 1&lt;/div&gt;

我想要一个在顶部和下方显示设备 1 的框，我想添加其他文本。

【问题讨论】：

HTML 用于内容和结构，CSS 用于表示。如果您希望页面上有更多真实的文本，从语义上讲，它应该是 HTML。如果您想在框内设置两行，请考虑在当前行内创建两个 <div>s，而不是在外部创建第二个。

标签： javascript html css

【解决方案1】：

因为 div 是一个容器，所以在里面放更多的标签！

所以你可以让css看起来像这样

.Device1 {
  position: relative;
  left: 8%;
  top: 20px;
  text-align:center;
  width: 400px;
  height: 100px;
  border: 1px solid #000000;
}

让 html 看起来像这样

<div class="Device1">
  Device 1
  <h1>Other Text</h1><br>
  <p> more text</p>

</div>

【讨论】：

【解决方案2】：

你可以试试这个位置属性。

.Device1 {
  position: relative;
  left: 8%;
  top: 20px;
  text-align: center;
}

<div class="Device1" style="width: 400px; height: 100px;border: 1px solid #000000;">Device 1</div>
<span style=" position: relative; top: -64px; left: 124px; ">new line </span>

【讨论】：