如何在Bootstrap列内使用文本溢出? [英] How to use text-overflow inside Bootstrap column?

问题描述

假设我有一排固定高度的行，并且在其列中插入了一些文本.如果时间太长，我想将其剪掉，并在该行的末尾添加三个点，如下所示:

Suppose I have a row with fixed height and I inserted some text to its column. If it's too long I wanna it to be cut off and at the end of the line three dots supposed to be added like this:

我正在此行中使用 text-overflow:省略号; 属性，但无法使其正常工作.

I'm using text-overflow: ellipsis; attribute for this in my row but can't get it to work.

JsFiddle

我在做什么错了?

HTML

<div class="container">
  <div class="row text">    
    <div class="col-xs-4" style="border: solid">
 Some really long text!  Some really long text!  Some really long text!  Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
    </div>
  </div>        
</div>

CSS

.row {
    margin: 2px 0;
}

.text {
    word-wrap: break-word;
    height: 50px;
    text-overflow: ellipsis;
}

推荐答案

如果要使用CSS执行此操作，请尝试以下代码:

If you want to do this using css, then try below code :

HTML:

<div class="container">
  <div class="row">    
    <div class="col-xs-4" style="border: solid">
        <div class="text">
            Some really long text!  Some really long text!  Some really long text!  Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
        </div>
    </div>
  </div>        
</div>

CSS:

.row {
    margin: 2px 0;
}

.text {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    height: 50px;
    margin: 0 auto;
    line-height: 1.2;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

这是 jsfiddle

为了了解css中的换行换行

For understanding line clapming in css Line Clamping

这篇关于如何在Bootstrap列内使用文本溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！