有沒有辦法使用CSS或JS截斷中間的字符串？

我需要一種方法來截斷中間的字符串以用於移動應用程序。該字符串在結尾處有重要信息，我總是希望可見。我一直無法找到一個CSS方法在字符串中間，只是開始或結束。有沒有辦法使用CSS或JS截斷中間的字符串？

我正在研究一種方法來做到這一點在JS中，但我認爲這已被解決，我不想重新發明車輪。我看到成爲一個問題的事情是，我需要它是基於屏幕大小的動態。我不能簡單地說，如果string.length > 100然後截斷。我需要看看什麼適合，然後截斷，並使其傾聽像更改方向一樣的大小更改。

來源

2013-08-06 John S

CSS ['text-overflow：ellipsis']（https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow）只能在開頭或結尾工作，是的。爲什麼（和*如何*）你想分裂它在中間？ – Bergi

@Bergi有時顯示開始和結束很重要。我知道我們在我們的網站上做到了，用戶將擁有很多域名。所以他們可能真的是realdomain.com，並且真的是realdomainmain.net。最後切斷它不會幫助用戶快速確定哪個域是哪個域，因爲它們最終都會成爲真正的區域... –

使用CSS，您可以輕鬆使用省略號，但只能在文本的末尾。

但是，有一個jQuery插件調用dotdotdot，它可以做到這一點。

下面是它的頁面：DotDotDot

他們的一個演示的實例顯示，一個長的URL如何變成
www.website.com/that/should/... /file.html

我花了一些時間試圖讓這個工作正常，並它還不是很完美，但工作得很好。

// @param element obtained with $("selector") 
// @param spacer  ' ' for text, or '/' for links. 
// @param position number of words to leave at end 
function doEllipsis(element, spacer, position) { 
    $(element).data('ell-orig', $(element).html()); 
    $(element).data('ell-spacer', spacer); 
    $(element).data('ell-pos', position); 

    var pieces = $(element).html().split(spacer); 
    if (pieces.length > 1) { 

     var building = ""; 

     var i = 0; 


     // for "position" to mean "fraction where to wrap" (eg. 0.6), use this: 
     // for (; i < pieces.length*position; i++) {  

     for (; i < pieces.length-position; i++) { 
      building += pieces[i] + spacer; 
     } 


     building += '<span class="ell">'; 

     for (; i < pieces.length; i++) { 
      building += pieces[i] + spacer; 
     } 

     building += '</span>'; 

     $(element).html(building); 

     $(element).dotdotdot({ 
      after: 'span.ell', 
      wrap: 'letter' 
     }); 
    } 
} 

// use to redraw after the size changes etc. 
function updateEllipsis(element) { 
    var orig = $(element).data('ell-orig'); 
    var spacer = $(element).data('ell-spacer'); 
    var pos = $(element).data('ell-pos'); 

    $(element).trigger("destroy"); 
    $(element).empty(); 

    $(element).html(orig); 

    doEllipsis(element, spacer, pos); 
}

下面是這個例子的fiddle（它使用託管在我的Dropbox的一個副本，因此這是相當確定它不會永遠工作）。

它響應（在某種程度上，無論如何），並將省略號放在您告訴它的位置。

來源

2013-08-06 19:26:32 MightyPork

請問您可以舉一個例子來說明如何使用dotdotdot，以便在中間切割文本* ？ – Bergi

我特別提到這一點，並表示它不會工作。爲什麼它被提高？ –

@Bergi在他們的網站上有一個例子 – jcollum

我該怎麼做...

選擇一個等寬字體，所以每個字符是相同的寬度。然後根據您希望的字體大小找出每個字符的寬度。然後動態地計算出您可以在手邊的元素或窗口內容納多少個字符;那將是最大的。然後，您可以在截斷函數中使用該最大數字，這會使新字符串長度最大減4（對於「...」減1，因此最後一個字符不會意外滑出屏幕）。

來源

2013-08-06 20:01:24

有沒有辦法使用CSS或JS截斷中間的字符串？

回答

相關問題