标题对较长的标题不当 [英] Header misbehave on longer title

问题描述

我的行程不正确：

代码如下所示：

 < div class =row row-grid> 
< div class =col-sm-6 col-md-4 col-lg-4 col-xl-3> 
< div class =box> 
< div class =col-sm-12> 
< h2 class =pull-right>< span class =label label-warning> 1< / span>< / h2> 
< h3 class =pull-left shadow> 
 Piotrek z Bagien 
< br> 
< span>< h4 class =灰色阴影> Pinta< / h4>< / span> 
< span>< h6 class =grey shadow>印度Pale Ale（波兰）< / h6>< / span> 
< / h3> 
< / div> 
< / div> 
< div class =id =sub-row> 
< span class =col-sm-6 white-text> 7zł/ 9zł/ 12zł< / span> 
< span class =col-sm-6 white-text> 5.2％/ 90 IBU< / span> 
< / div> 
< / div> 
 
< div class =col-sm-6 col-md-4 col-lg-4 col-xl-3> 
< div class =box> 
< div class =col-sm-12> 
< h2 class =pull-right>< span class =label label-warning> 1< / span>< / h2> 
< h3 class =pull-left shadow> 
 Piotrek z Bagien印度淡蓝色
< br> 
< span>< h4 class =灰色阴影> Pinta< / h4>< / span> 
< span>< h6 class =grey shadow>印度Pale Ale（波兰）< / h6>< / span> 
< / h3> 
< / div> 
< / div> 
< div class =id =sub-row> 
< span class =col-sm-6 white-text> 7zł/ 9zł/ 12zł< / span> 
< span class =col-sm-6 white-text> 5.2％/ 90 IBU< / span> 
< / div> 
< / div> 
 
 
< / div> 
  

如果过长或其他优雅的话，我想要将字符串连接为...解决方案，不会破坏整个布局。

编辑：几乎在那里感谢回答。现在看起来像这样：

I have problem with misbehaving header:

Code looks like this:

<div class="row row-grid">
    <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3">
        <div class="box">
            <div class="col-sm-12">
                <h2 class="pull-right"><span class="label label-warning">1</span></h2>
            <h3 class="pull-left shadow">         
               Piotrek z Bagien
               <br>
               <span><h4 class="gray shadow">Pinta</h4></span>
                <span><h6 class="gray shadow">India Pale Ale (Poland)</h6></span>              
            </h3>   
            </div>
        </div>
        <div class="" id="sub-row">     
            <span class="col-sm-6 white-text">7 zł / 9 zł / 12 zł</span>
            <span class="col-sm-6 white-text">5.2%/90 IBU</span>
        </div>
     </div>

     <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3">
        <div class="box">
            <div class="col-sm-12">
                <h2 class="pull-right"><span class="label label-warning">1</span></h2>
            <h3 class="pull-left shadow">         
               Piotrek z Bagien India Pale Ale
               <br>
               <span><h4 class="gray shadow">Pinta</h4></span>
                <span><h6 class="gray shadow">India Pale Ale (Poland)</h6></span>              
            </h3>   
            </div>
        </div>
        <div class="" id="sub-row">     
            <span class="col-sm-6 white-text">7 zł / 9 zł / 12 zł</span>
            <span class="col-sm-6 white-text">5.2%/90 IBU</span>
        </div>
     </div>


  </div>

What I want to achieve is to concat String with "..." if too long or other elegant solution that won't destroy whole layout.

edit: Almost there thanks to answer. Now it looks like this: and I have two questions:

• why left side of the concatenated text lost it's shadow?
• how to make it work when screen gets smaller?

解决方案

You can make trailing dots with something like this:

HTML

<div class="toolong">
    this text is just too loooooooooooooooooooooooooong
</div>

CSS:

 .toolong {
    width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
}

http://jsfiddle.net/jguaxbsg/

这篇关于标题对较长的标题不当的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！