强制文本显示在css的两行中

Question

我有一个CSS问题，这似乎很容易。 我有一个文本，如下所示：＆＃34;重要的想法。持久的价值。＆＃34;

当我在移动设备上时，我需要在两行显示此文本。我尝试了很多可能性，但没有一个对我有用。

这是html代码：

 <div class="home_firstrow" id="panel-one">
    <div>
        <h3> Big Ideas. Lasting Value.</h3>
        <div class="container"> 
        </div>  
    </div> 
</div>     

我试图为h3元素添加：

white-space: normal

我试图设置

 heigth

和

min-heigth

但这些都不适合我。你知道我能尝试什么吗？ 问题是我需要从css解决这个问题。我只在移动视图中需要两行文本。 谢谢！

Answer 1

试试这个..

使用时请使用媒体查询。因为它有一个固定的width;

＆＃13;

＆＃13;

h3{
    width:120px;
}

＆＃13;

<div class="home_firstrow" id="panel-one">
    <div>
        <h3> Big Ideas. Lasting Value.</h3>
        <div class="container"> 
        </div>  
    </div> 
</div>     

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用流行的css框架对您的网站更好！但是你可以在@media (max-width:..)

的css .Control中尝试这样的方法

   h3 {
    width:100%;
    }
    h3 span {
    float:left;
    width:50%;
    }
    /*in mobile view ,give full width each span */
    @media (max-width: 500px) {
     h3 span {
       width:100%;
       background:red;
     }
    }

 <h3><span>Big Ideas.</span><span>Lasting Value.</span></h3>

Answer 3

你写错heigth拼写错误

其height而非heigth

所以请写height而不是heigth

Answer 4

您可以使用@media screen and (orientation:portrait) { … }。