相关疑难解决方法(0)

我不知道为什么这个简单的CSS不起作用......

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

应该在4号"测试"周围切断

是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局？

我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.

我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).

有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？

我为这个问题制作了一个图像,以便更容易理解.

是否可以在<div>具有固定宽度和多行的a 上创建省略号？

我已经在这里和那里尝试了一些jQuery插件,但找不到我正在寻找的那个.有什么建议？想法？

我有一个弹性布局的网页,如果调整浏览器窗口大小,它会改变其宽度.

在这种布局中,标题(h2)将具有可变长度(实际上是我无法控制的博客标题的头条新闻).目前 - 如果它们比窗户宽 - 它们分成两行.

是否有一个优雅的,经过测试的(跨浏览器)解决方案 - 例如使用jQuery - 缩短了标题标签的innerHTML,如果文本太宽而无法放入当前屏幕的一行,则会添加"..."容器宽度？

我知道你可以使用CSS规则的组合,当溢出时间(离开父节点)时,文本以省略号(...)结尾.

是否可以(随意说,不)实现相同的效果,但让文本包裹多行？

这是一个演示.

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

正如您所看到的,当文本比div的宽度宽时,文本以省略号结尾.但是,仍然有足够的空间让文本换行第二行并继续.这被white-space: nowrap省略,这是省略号工作所必需的.

有任何想法吗？

PS:没有JS解决方案,如果可能的话纯CSS.

我使用这个webkit线夹,它适用于Chrome,但不适用于Firefox.以下是代码:

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* number of lines to show */
line-height: X;        /* fallback */
max-height: X*4;       /* fallback */
}

我应该如何使它在Firefox上运行？

我试图让一个字符串适合确定的区域(td)而不会破坏线条.问题是:它需要......

• 调整大小时适合
• 适合N各种分辨率
• ...需要时在最后添加(不需要时不添加)
• 接受的变化font-size,font-weight以及font-family

基于对Novon的问题的答案,我做了以下代码:

CSS (//只是添加一些样式来打破这一行)

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

jQuery的 (//查找包含所有TD .truncated的元素,再次得到真正的宽度(删除内容并将其添加)td.应用,如果需要的话,minWidth上td)

jQuery('.truncated').closest('td').each(function() {
    var text = jQuery(this).text();
    var widthOriginal = jQuery(this).width();
    var widthEmpty = jQuery(this).text('').width();
    jQuery(this).text(text);
    if(widthOriginal >= widthEmpty){
        var width = (parseInt(widthEmpty) - 10) + 'px';
        jQuery(this).css('maxWidth', width);
        jQuery(this).text(text + '...');
    }
});

结果(如上面代码所预期的)是:

但它应该是:

我在想,也许试着找到第一个line字符串并删除其余部分,但没有找到办法做到这一点(这是我的口味的很多"解决方法").有没有更好的方法呢？

如果我将一个文本体放入一个具有设定高度和隐藏溢出的容器中,我通常会得到最终的线条,可以适合被切断.示例jsFiddle或image:

有没有办法让这条线不完整而不是发生这种情况？

场景是我的列是动态高度(父高度的100%,身高的80%),包含博客文章,我想在底部显示"全部阅读",如果有的话溢出的文字(容易确定).目前它只是看起来很可怕,一半的渲染文本坐在它上面.

我无法删除溢出,因为列需要在导航之前结束,导航位于页面底部.

我有一个列表,divs其中显示较长文档的预览.文档使用不同的字体样式.所以我没有恒定的线高.这是一个例子:http://jsfiddle.net/z56vn/

我只需要显示每个文档的前几行.我们已经确定300px是正确的.如果我只设置一个max-height300px到divs,那么根据文本属性(大小,填充,边距),最后一行的底部会被剪裁.

如何max-height为接近300px但不会导致剪裁的每个块设置一个？

该解决方案可以使用CSS,Javascript和jQuery.

这两个问题是相似的,但他们的解决方案采用恒定的线高.

• 在html段落中显示前3行
• 显示段落的第一行

我想在一个只有两行可以容纳的小空间中显示文本.当文本太长时,我正在寻找一种在第二行末尾获得省略号的方法.

我用了一张桌子,但它不起作用,我无法限制细胞高度.

<td style="overflow-x: hidden;overflow-y:hidden;text-overflow: ellipsis;max-height:50px">text</td>