省略號不適用於長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; 
}

任何想法如何逃避省略號中的特殊字符？

來源

2014-03-24 user3455193

據我所知，對於省略號正常工作，我們也應該用'白space'性能比'normal'值等。 –

什麼是您的HTML標記？數據是否直接放在'td'元素中，並且該元素上是否設置了任何寬度？ –

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

來源

2014-03-24 12:41:50 SW4

這是工作的URL，但它添加省時號字段，其中包含空格，我不想在時間戳字段中顯示省略號。 – user3455193

不要將類添加到那些你不想要的行爲中？ – SW4

我認爲你需要指定一個寬度CSS屬性。 .ui-jqgrid tr.jqgrow td { ... width: 15%; } 的jsfiddle演示：http://jsfiddle.net/Lk55w/1/

來源

2014-03-24 12:45:48 bingorabbit

省略號不適用於長URL網址

回答

相關問題