Question

我很确定只用html / css这是不可能的，但我想问一下以防万一。假设我在<div>中有<td>，div具有overflow: hidden;样式。而不是溢出被切断，我想：

检测到有溢出。
通过删除div内容的最后3个字母进行反应，并在末尾添加“...”。

编辑：我在最初提出问题时错过了一个关键细节 - 这可能与溢出y有关，所以在生成“...”之前我仍然可以有多行文字吗？

Answer 1

取自OP评论中的link I provided的示例：

.element-to-cut-off {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

从你的plnkr，将div类更改为：

div{
    background-color:cyan;
    width: 80px;
    height: 40px; 
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

将plnkr更改为多行：

div{
  background-color:cyan;
  width: 80px;
  height: 40px; 
  overflow: hidden; 
  -webkit-line-clamp: 2; // number of lines before ellipsis kicks in
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

我会强调我不知道哪些浏览器可以使用此css3并且没有时间测试所有浏览器，但在Chrome 46中工作正常

Answer 2

从barneycarroll's codepen获取一个叶子是一个解决方案，它只用一个额外的元素（一个包装器）来解决溢出问题，而不依赖于-webkit-line-clamp来允许溢出前的多行：

＆＃13;

/*
The ellipsis classes reveal a '...'
if there is more content that isn't being displayed

The ellipsis-container class adds padding to the container
to stop the ellipsis clipping text
*/

.ellipsis-container {
  padding-right: 1em;
  position: relative;
}

.ellipsis {
  background: inherit;
  display: inline;
}

.ellipsis:before,
.ellipsis:after {
  background: inherit;
  position: absolute;
}

/* Provide the actual ellipsis character at the bottom right */
.ellipsis:before {
  content: '\2026';
  bottom: 0;
  right: 0;
}

/*
Hide the ellipsis from the `:before` pseudo-element
until the text reaches the last line (at which point
this element will be in the hidden overflow).
*/
.ellipsis:after {
  content: '';
  height: 100%;
  width: 100%;
}

/* Clamping is just a mechanism to limit the number of lines that can be displayed in a container */
.clamped {
  line-height: 1.5;
  overflow: hidden;
}

.clamped-2 {
  /* Clamp to 2 lines, ie line-height x 2: */
  max-height: 3em;
}

.clamped-3 {
  max-height: 4.5em;
}

/* Generic styles */
body {
  background: #cfdbec;
  color: #cfdbec;
  font: 12px/1.5 Consolas, monospace;
  margin: 0;
}

p {
  /* Demonstrate that this technique works on non-solid backgrounds. This background image causes zebra striping. It happens to be 36px high, ie twice the line height ( 12px * 1.5 * 2 ). Background-sizing may be necessary. */
  background-image: url(data:image/gif;base64,R0lGODlhAQAkAIAAAERERC8vLyH5BAAAAAAALAAAAAABACQAAAIHhI95we3fCgA7);
  /* This part is essential to keep the ellipsis bits in sync */
  background-attachment: fixed;
  border: 1.5em solid #2f2f2f;
  /* Keeping a tight vertical rythm (everything in multiples of 1.5em) makes sure the background image will always align */
  margin: 1.5em 0;
}

＆＃13;

<p class="ellipsis-container clamped clamped-2">
    <span class="ellipsis">
        There's a bit of text here. Enough to trigger the effect? Probably not.
    </span>
</p>
<p class="ellipsis-container clamped clamped-3">
    <span class="ellipsis">
        But more text here (the same markup structure though): if the text overflows from the clamped paragraph's height, the ellipse will show. You may have to resize the browser window (or this paragraph's container) to see the effect in action.  Once the text is long enough the ellipsis show up and everything gets cut off.  The `1em` of padding on `ellipsis-container` ensures that no word is every *under* the ellipsis.
    </span>
</p>

＆＃13;

Answer 3

我只是想添加一个Javascript方法。我从未使用过Angular，因此我使用jQuery和找到的函数here来完成它。请注意title属性已更新，因此如果将鼠标放在它上面，则可以读取全文。

$('input').on('keyup',function(){
    var $input = $(this);
    var $div = $('table div');
    var text = $(this).val();

    $div.attr('title',text);
    $div.text(text);

    while(checkOverflow($div[0])){
        var short_text = $div.text().substring(0, $div.text().length - 4) + "...";
        $div.text(short_text);
    }
});

这是一个有效的JSFiddle。

Answer 4

你需要很少的CSS来创造你想要的效果，即：

HTML

<div class="ellipsis">a very long text goes here</div>

CSS

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

希望它有所帮助！

如果存在溢出，则更改单元格值

4 个答案:

HTML

CSS