当元素溢出时,将完整的跨度向下推

时间:2016-04-08 07:13:32

标签: html css twitter-bootstrap

我有以下代码

<div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-2 col-lg-3 col-lg-offset-2 relative">
    <div id="contactinfo" class="text-white">
        <span>client name</span> – 
        <span><a href="mail@something" class="text-green">mail@something</a></span> – 
        <span>01 23456789</span>
    </div>
</div>

当我将屏幕调整到某一点时,电话号码(因为它现在彼此相邻显示)我希望,当我的电话号码被打破时,我想要换一个新线路。现在,只要它不再适合,它将只移动23456789部分,因为那是技术上溢出的,但我希望整个元素向下移动,所以它不会破坏声音的外观。这可能吗?

这是它的一个蠢货。 http://www.bootply.com/RFVcvXGRmP

3 个答案:

答案 0 :(得分:3)

在此范围内使用display: inline-block

See it here

答案 1 :(得分:2)

如果您不想更改initial元素的<span>显示值,可以将white-space规则与nowrap一起使用。这实际上是它的目的。

  

white-space

     

white-space属性用于描述如何处理元素内的空白。

     

<强> NOWRAP   
与正常情况一样折叠空格,但抑制文本中的换行符(文本换行)。

#contactinfo span:nth-child(3) { 
    white-space:nowrap; 
}

我知道已经有一个已接受的答案,只是将其添加到记录中。

答案 2 :(得分:-1)

$arr = []; // Your array
if(typeof $arr[0] == "undefined") {
    $arr[0] = "No";
}