CSS Clip美國>田納西州>納什維爾從左起？

我有一個ASP.NET生成的「選擇位置」的超鏈接。當用戶點擊它時，它會將它們帶到一個新頁面，供他們選擇一個新位置/change-location/default.aspx。它可以在地球上任何一個國家/國家/城市：CSS Clip美國>田納西州>納什維爾從左起？

"United States > Tennessee > Nashville" 
"Australia > New South Wales > Sydney" 
"Saint Vincent and the Grenadines > Other > Port Elizabeth, Bequia" etc

通常情況下，整個藍色超鏈接顯示在移動人像（320像素寬小於10px的保證金每邊）的罰款。

然而，當它是一個非常長的鏈路，例如：

"Saint Vincent and the Grenadines > Other > Port Elizabeth, Bequia"

它換到下一行。

雖然我們只想總共使用一條線。

我怎樣才能使它所以如果是>寬300像素，它的剪輯從留下省略號：

"... Grenadines > Other > Port Elizabeth, Bequia"

使用CSS？

來源

2017-04-05 user1946932

我在asp.net項目中使用過一次。基本上，您需要使用方向，文本對齊和文本溢出來獲取左側的省略號。

p { 
 
    white-space: nowrap;      
 
    overflow: hidden;    /* "overflow" value should not be "visible" */ 
 
    text-overflow: ellipsis; 
 
    width:300px; 
 
    direction:rtl; 
 
    text-align:left; 
 
}

<p>"United States > Tennessee > Nashville"<br /> 
 
"Australia > New South Wales > Sydney" <br /> 
 
"Saint Vincent and the Grenadines > Other > Port Elizabeth, Bequia"</p>

來源

2017-04-05 04:38:02

感謝您的。它似乎運作良好。我可能會推動它，但有誰知道如何只顯示整個單詞？我只是想知道用戶是否會說「renadines」是什麼意思？ – user1946932

或者從用戶體驗的角度來看，我想知道人們是否會認爲「......其他>伊麗莎白港，貝基亞」在這些超長的情況下會更合適/乾淨？ – user1946932

它現在可能超出原始問題的範圍，但我想我可能需要使用https://www.codeproject.com/articles/2118/bypass-graphics-measurestring-limitations來衡量（strCountry +'>'+ strState +'>'+ strCity），如果大於300px，那麼測量（strState +'>'+ strCity），如果大於300px，那麼就使用strCity，儘管如此，還是使用Pratik的代碼。 – user1946932

CSS Clip美國>田納西州>納什維爾從左起？

回答

相關問題