省略号不适用于长URL

时间:2014-03-24 12:38:36

标签: css ellipsis

如果长网址,省略号无效。在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;
}

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

2 个答案:

答案 0 :(得分:2)

您需要设置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 */
}

答案 1 :(得分:0)

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