Css 省略号不适用于长URL

如果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;
}

---

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

您需要设置

空白：nowrap以便省略号行为按预期工作


HTML

我认为您需要指定宽度CSS属性。

.ui jqgrid tr.jqgrow td{
...
宽度：15%；
}

JSFIDLE Demo:
AFAIK，为了使省略号正常工作，我们还应该将
空白
属性与
正常
值一起使用。您的HTML标记是什么？数据是否直接位于
td
元素中，该元素上是否设置了任何宽度？这对URL有效，但它为包含空格的时间戳字段添加了省略号，我不想在时间戳字段中显示省略号。不要将类添加到您不希望其行为的元素中？
<div class='ellipsis'>http://stackoverflow.com/questions/22609623/ellipsis-not-working-for-long-url</div>

.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 */
}