Question

我用弯角材料设计了这个盒子。我无法将这两个单词分成两行（上下）。我已经包含了一个图像。在这里，我想要两行中的1349和新反馈。我是角质材料的新手。感谢

int

Answer 1

这是 css 问题。

您想要在2行中订购2个内联元素（span）。您应该尝试将其中一个设置为块元素或，以在它们之间添加br标记。

 <style>
  .box-item {
      display: inline-block;
      background-color: cornflowerblue;
      height: 120px;
  }
  .box-text {
      color:white;
      display: block;
  }
</style>

示例Here

Answer 2

这是因为默认情况下<span>标记是inline元素，并且只占用所需的宽度。

如果您需要使用跨度并且需要单独行上的项目，则可以通过CSS更改元素的行为，方法是将其显示属性更改为block，如Cuzi所述，添加单个使用<br>标记在元素之间换行，或使用块级元素，例如<div>标记。

我建议为工作使用正确的元素。因此像<div>标记这样的块级标记是理想的。这将导致两个元素占用可用的全部宽度，因此在不需要额外的css行的情况下位于单独的行上（另外，在HTML中为每个元素保存一个字节的空间！

以下是如何在CSS中使用它。

.box-text {
    color:white;
    display: block;
}

带有<br>标签的Heres：

<span class="md-display-1 box-text">1349</span>
<br>
<span class="box-text">New Feedbacks</span>

三个中最简单，最具语义性的div标签：

<div class="md-display-1 box-text">1349</div>
<div class="box-text">New Feedbacks</div>

如何在两行中打破这两个词

2 个答案: