混淆哪个div需要溢出隐藏

我们正在使用div容器设计一个简单的SMS列表视图。基本的想法是让这个页面适用于不同的手机屏幕尺寸。我不想加载像bootstrap这样的第三方脚本。混淆哪个div需要溢出隐藏

我成功地设计了页面，它在http://jsfiddle.net/my9Lt7jf/可用。它看起来不错，但是如果我将浏览器缩小到更小的宽度，那么容纳名称和手机号码的div容器就会换行并分解到下一行。这同样适用于短信。当浏览器缩小到更小的宽度时，我不想将它带到下一行。相反，我希望文本可以隐藏3个点，这样它就可以在最后以3个点显示在一行中。

代码

.his_outercontainer{ 
    width:100%; 
    border:1px solid #cccccc; 
    height:50px; 
    display: table; 
} 
.his_leftcontainer{ 
    width:30px; 
    padding:3px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.his_middlecontainer{ 
    padding:3px; 
    display: table-cell; 
} 
.his_rightcontainer{ 
    padding:3px; 
    display: table-cell; 
    text-align:right; 
} 
.his_mobilenumber{ 
    font-weight:bold; 
} 
.his_textmessage{ 
    overflow:hidden; 
    padding-top:3px; 
} 
.his_senttime{ 
    font-style:italic; 
} 
.his_flagindicator{ 
    padding-top:3px; 
}

HTML代码

<div class='his_outercontainer'> 
     <div class='his_leftcontainer'> 
      <input type='checkbox' /> 
     </div> 
     <div class='his_middlecontainer'> 
      <div class='his_mobilenumber'> 
       Ramkumar <+911234567890> 
      </div> 
      <div class='his_textmessage'> 
       Happy birthday to you Mr.John 
      </div> 
     </div> 
     <div class='his_rightcontainer'> 
      <div class='his_senttime'> 
       31st Oct 10:45 pm 
      </div> 
      <div class='his_flagindicator'> 
       <img src='green.png' /> 
      </div> 
     </div> 
    </div>

它的样子是如下

enter image description here

但是应该如何如下

的CSS 0

enter image description here

来源

2014-11-03 Malaiselvan

尝试使用http：// www.w3schools.com/cssref/css3_pr_text-overflow.asp – SkelDave 2014-11-03 21:18:22

添加以下CSS

.his_mobilenumber { 
    width: 153px; /* Give it a fixed width and set the overflow as below */ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

来源

2014-11-03 21:20:14 shakirthow

谢谢，现在我可以看到文本不会突破第二行，并且还有3个点出现环。但它需要一个固定的宽度。提供固定宽度将始终显示所有屏幕尺寸的大小。考虑到页面显示在平板电脑或宽屏幕上，即使有空格，它也只会显示指定的宽度。 – Malaiselvan 2014-11-03 21:28:05

这是真的..因此，您可以使用媒体查询，它根据屏幕大小设置宽度。[链接]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。不幸的是，要使用“溢出”CSS功能触发..应该有一个固定的宽度，可以溢出。另一个选择是使用JS来操纵宽度 – shakirthow 2014-11-03 21:34:57

您可以尝试使用text-overflow: ellipsis请参阅MDN我的信息。

来源

2014-11-03 21:19:59 Tom

做你尝试使用：

div { 
     text-overflow: ellipsis; 
    }

来源

2014-11-03 21:20:17 Scoala

.his_mobilenumber 
    { 
    width: 300px; /* you can change this to your desired width */ 
    text-overflow: ellipsis; /* any text that overflows will be replaced with a '...' at the end'. */ 
    overflow: hidden; /* this will hide anything that overflows the container */ 
    whitespace: nowrap; /* text will never wrap to the next line */ 
    }

W3Schools的是一个很好的网站，用于帮助:)

来源

2014-11-03 21:26:42 user3476093

谢谢，是否有可能没有所需的宽度。可能最小宽度，因为我不想在更宽的屏幕手机显示点。 – Malaiselvan 2014-11-03 21:34:52

混淆哪个div需要溢出隐藏

回答

相关问题