如何在響應div中隱藏長文本？

我遇到了這種設計問題。我想隱藏div不能包含的多餘文本。我已經嘗試使用「溢出：隱藏」和「自動換行：打破字」但都不起作用。這是HTML和CSS。如何在響應div中隱藏長文本？

.contents { 
 
    text-align: center; 
 
    margin-bottom: 15px !important; 
 
} 
 

 
.instagram { 
 
    background-image: url("https://snd-assets.s3.amazonaws.com/icons/flat/instagram.png"); 
 
} 
 

 
.logos.logos-lg { 
 
    background-size: 120px auto; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 

 
.logos { 
 
    margin: 0 auto 15px; 
 
    background-position: 1px 1px; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 

 
.box_panel { 
 
    width: 100%; 
 
    height: 132px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 

 
.box_icon { 
 
    float: left; 
 
    background-color: #f5f5f5; 
 
    border-right: 1px solid #ddd; 
 
    margin: 0px 15px 0px 0px; 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 

 
.box_icon .logos { 
 
    margin: 5px auto !important; 
 
} 
 

 
.box_body { 
 
    padding: 15px; 
 
    text-align: left; 
 
} 
 

 
.box_body h4 { 
 
    font-weight: bold; 
 
}

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
    <div class="box_icon"> 
 
     <div class="logos logos-lg instagram"></div> 
 
    </div> 
 
    <div class="box_body"> 
 
     <h4>Title</h4> 
 
     Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
    <div class="box_icon"> 
 
     <div class="logos logos-lg instagram"></div> 
 
    </div> 
 
    <div class="box_body"> 
 
     <h4>Title</h4> 
 
     Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
    <div class="box_icon"> 
 
     <div class="logos logos-lg instagram"></div> 
 
    </div> 
 
    <div class="box_body"> 
 
     <h4>Title</h4> 
 
     Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
    <div class="box_icon"> 
 
     <div class="logos logos-lg instagram"></div> 
 
    </div> 
 
    <div class="box_body"> 
 
     <h4>Title</h4> 
 
     Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
    </div> 
 
    </div> 
 
</div>

每當我試着調整頁面大小，特別是對最小的屏幕尺寸，文字只是滲出這是不是很漂亮的div。我無法設置box_body，因爲它應該遵循col- *的大小。

來源

2017-03-23 Paul

您是否嘗試過使用'文本溢出後

包裝文本：省略號;'你要控制的文本選擇？ [更多信息]（https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow），[文本溢出兼容性]（http://caniuse.com/#search=text-溢出） –

也試過那個。不工作。 – Paul

將overflow: hidden;增加到.box_body。並創造一些「填充」有這樣的溢出點是不漲反父的邊緣，限制元素的height與max-height: calc(100% - 15px);

.contents { 
 
    text-align: center; 
 
    margin-bottom: 15px !important; 
 
} 
 

 
.instagram { 
 
    background-image: url("https://snd-assets.s3.amazonaws.com/icons/flat/instagram.png"); 
 
} 
 

 
.logos.logos-lg { 
 
    background-size: 120px auto; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 

 
.logos { 
 
    margin: 0 auto 15px; 
 
    background-position: 1px 1px; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 

 
.box_panel { 
 
    width: 100%; 
 
    height: 132px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 

 
.box_icon { 
 
    float: left; 
 
    background-color: #f5f5f5; 
 
    border-right: 1px solid #ddd; 
 
    margin: 0px 15px 0px 0px; 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 

 
.box_icon .logos { 
 
    margin: 5px auto !important; 
 
} 
 

 
.box_body { 
 
    padding: 15px; 
 
    text-align: left; 
 
    overflow: hidden; 
 
    max-height: calc(100% - 15px); 
 
} 
 

 
.box_body h4 { 
 
    font-weight: bold; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-23 19:39:33

這救了我。非常感謝！ – Paul

我們也可以對顯示在邊界附近的文字部分進行一些操作嗎？它看起來像是隱藏的，但並不完全隱藏。我可以在這裏做保證金或填充嗎？ – Paul

@Paul當然，編輯我的答案，並將'overflow'移到'.box_body'，並且給了這個元素一個最大高度爲'calc（100％ - 15px）'的地方，其中'15px'是底部的空間。 –

正如@邁克爾提到你需要將更改爲.box_panel以生成hidden或auto（如果您想允許滾動）。問題是overflow有初始值visible - ref：https://developer.mozilla.org/en/docs/Web/CSS/overflow

來源

2017-03-23 19:43:53 user31782

我發現爲什麼你的代碼不起作用。你把這個分支放在一個錯誤的CSS類中。我對你的CSS代碼進行了修改，現在可以工作。

問候。

.contents{ 
 
    text-align: center; 
 
    margin-bottom: 15px !important; 
 
} 
 
.instagram { 
 
    background-image: url("https://snd-assets.s3.amazonaws.com/icons/flat/instagram.png"); 
 
} 
 
.logos.logos-lg{ 
 
    background-size: 120px auto; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 
.logos{ 
 
    margin: 0 auto 15px; 
 
    background-position: 1px 1px; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 
.box_panel{ 
 
    width: 100%; 
 
    height: 132px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
      box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
    overflow: hidden; 
 
} 
 
.box_icon{ 
 
    float: left; 
 
    background-color: #f5f5f5; 
 
    border-right: 1px solid #ddd; 
 
    margin: 0px 15px 0px 0px; 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 
.box_icon .logos{ 
 
    margin: 5px auto !important; 
 
} 
 
.box_body{ 
 
    padding: 15px; 
 
    text-align: left; 
 
    
 
} 
 
.box_body h4{ 
 
    font-weight: bold; 
 
}

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents"> 
 
    <div class="box_panel"> 
 
     <div class="box_icon"> 
 
      <div class="logos logos-lg instagram"></div> 
 
     </div> 
 
     <div class="box_body"> 
 
      <h4>Title</h4> 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
      Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live. 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-23 19:49:44

謝謝！與邁克爾斯上面的答案相同，但自從他首先回答後，我必須給他接受。儘管如此，非常感謝！ – Paul

沒問題保羅，我寫英文比較慢（笑話）。我很高興你收到一個適合你的答案。問候 –

您可以使用jQuery修復文本的長度。在p標籤或標籤H4任何其他標記

$(".box_body p").text(function(i, t) { 
    return (t.length >= 70) ? t.substring(0, 70) + '..' : t; 
    });

來源

2017-03-23 19:53:51

將工作。但一個簡單的CSS操作會更好。 – Paul

如何在響應div中隱藏長文本？

回答

相關問題