如何将这两个单词分成两行答案

【问题标题】：How to break these two words in two line如何将这两个单词分成两行
【发布时间】：2017-03-18 21:48:24
【问题描述】：

我用棱角材料设计了这个盒子。我不能把这两个词分成两行（上下）。我已经包含了一张图片。在这里，我想要两行中的 1349 和新反馈。我是角材料的新手。谢谢

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

   <div layout="row" style="padding: 32px;" ng-cloak>

<md-whiteframe class="md-whiteframe-2dp box-item" md-colors="[enter image description here][1]background:'blue-400'}"
               flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout
               layout-align="end center" layout-margin>
    <span class="md-display-1 box-text">1349</span>
    <span class="box-text">New Feedbacks</span>
</md-whiteframe>
</div>

【问题讨论】：

标签： html css angularjs angular-material

【解决方案1】：

这是一个css问题。

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

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

例如Here

【讨论】：

谢谢。但它在我的角度材料项目中不起作用
我更新了 CSS 试试看，如果错误告诉我它在你的项目中的显示方式

【解决方案2】：

这是因为<span> 标签默认是inline 元素，只占用必要的宽度。

如果您需要使用跨度并要求项目位于单独的行上，则可以通过 CSS 更改元素的行为，如 Cuzi 所述，将其显示属性更改为 block，在元素使用<br> 标签或使用块级元素，例如<div> 标签。

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

下面是如何在 CSS 中做到这一点。

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

这里带有<br> 标签：

<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>

【讨论】：