Question

我有行为不端的问题：

代码如下所示：

<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>

我想要实现的是将字符串与＆＃34; ...＆＃34;如果太长或其他优雅的解决方案不会破坏整个布局。

编辑：几乎感谢回答。现在它看起来像这样：我有两个问题：

为什么连接文本的左侧丢失了它的影子？
当屏幕变小时如何使其工作？

Answer 1

您可以使用以下内容制作尾随点：

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/

标题在较长的标题上行为不端

1 个答案: