省略号不适用于长 URL答案

【问题标题】：ellipsis not working for long URL省略号不适用于长 URL
【发布时间】：2014-03-24 12:38:36
【问题描述】：

如果 URL 较长，省略号将无法正常工作。对于 URL，它将 / 视为特殊字符，并且在每次出现 / 时都会中断。

.ui-jqgrid tr.jqgrow td 
{
   font-weight: normal; 
   overflow: hidden; 
   text-overflow: ellipsis;
   -moz-binding:url('ellipsis-xbl.xml#ellipsis'); 
   white-space: normal !important; 
   height: 22px;
   padding: 4px 2px 4px 2px;
   border-bottom-width: 1px; 
   border-bottom-color: inherit; 
   border-bottom-style: solid;
}

知道如何转义省略号中的特殊字符吗？

【问题讨论】：

AFAIK，为了让省略号正常工作，我们还应该使用white-space 属性，而不是normal 值。
您的 HTML 标记是什么？数据是否直接在td 元素中，是否在该元素上设置了任何宽度？

标签： css ellipsis

【解决方案1】：

您需要设置 white-space: nowrap; 以使省略号行为按您的预期工作。

Demo Fiddle

HTML

<div class='ellipsis'>http://stackoverflow.com/questions/22609623/ellipsis-not-working-for-long-url</div>

CSS

.ellipsis {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-binding:url('ellipsis-xbl.xml#ellipsis');
    white-space: nowrap;
    height: 22px;
    padding: 4px 2px 4px 2px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: solid;
    width:100px; /* set as an example */
}

【讨论】：

这适用于 URL，但它正在为包含空格的时间戳字段添加省略号，我不想在时间戳字段中显示省略号。
不要将类添加到那些你不想要行为的元素中？

【解决方案2】：

我认为您需要指定一个宽度 CSS 属性。 .ui-jqgrid tr.jqgrow td { ... width: 15%; } JSFiddle 演示：http://jsfiddle.net/Lk55w/1/

【讨论】：