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

我已经设计了带角材料的盒子。我无法将这两个单词分成两行（上下）。我已经包含了一个图像。在这里我想要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>

来源

2017-03-18 monir tuhin

这是一个CSS问题。

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

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

例Here

来源

2017-03-18 12:02:03 Cuzi

谢谢。但它不起作用在我的角材料项目 –

我更新了CSS尝试它，如果它错误告诉我它是如何出现在您的项目 – Cuzi

它已经工作。再次感谢。 –

这是因为<span>标签是inline元件默认和只占用根据需要尽可能多的宽度。

如果你需要使用的跨度，并要求该项目的在单独的行然后可以通过改变它的由Cuzi陈述显示属性block通过CSS改变元素的行为，添加使用的元素之间的单一换行符<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>

来源

2017-03-18 12:55:17 cnorthfield

非常感谢papakia –

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

回答

相关问题