有没有办法使用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截断中间的字符串？

回答

相关问题