剪切一個字符串以適應div的寬度並在字符串的末尾添加三個點

如何剪切一個字符串以適應div的寬度？剪切一個字符串以適應div的寬度並在字符串的末尾添加三個點

比方說，我有一個很長的字符串，如"Anyone can help me to solve this problem"放在80px寬的div。我想要的是剪切字符串，以適應div的寬度，並在一個單詞的末尾添加「...」，如"Anyone can help me..."

來源

2009-07-24 tiny

這看起來裝點你的div像一個可能的副本http://stackoverflow.com/questions/282758/truncate-a-string-nicely-to-fit-within-a-given-pixel-width – aem 2009-07-24 04:38:44

另外，http://stackoverflow.com/questions/195408 /限制顯示長度的網頁上的字符串是非常相似的，另一個我昨天看到，但無法找到沒有W上。 – aem 2009-07-24 04:40:35

我很確定不知道該在哪裏剪切字符串。你可能使用JavaScript來逐個刪除字符，直到寬度爲< = 80px，然後附加一個......但我不會推薦它。更好的方法是裁剪你的字符串到一定長度知道將會超過80px，然後用CSS把overflow:hidden放在你的div上，然後將你的...作爲一個單獨的元素覆蓋並對齊到div的右側。它可能稍微偏離，但我認爲這是你能做的最好的。 Gmail做了這樣的事情。他們將它裁剪成預定義數量的字符，打上...並隱藏仍然太長的任何內容。

來源

2009-07-24 02:48:56 mpen

您可以使用諸如this one by Justin Maxwell之類的方法嘗試使用CSS截斷帶有省略號的字符串。

基本上，要使它跨瀏覽器工作，您必須使用標準CSS，特定於瀏覽器的CSS和一些XML的組合。完整的書面記錄可以在上面的鏈接閱讀，但最終的產品是：

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); 
}

與

<?xml version="1.0"?> 
<bindings 
    xmlns="http://www.mozilla.org/xbl" 
    xmlns:xbl="http://www.mozilla.org/xbl" 
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
> 
    <binding id="ellipsis"> 
     <content> 
      <xul:window> 
       <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> 
      </xul:window> 
     </content> 
    </binding> 
</bindings>

合併然後用CSS類=「省略號」

來源

2009-07-24 03:51:16

剪切一個字符串以適應div的寬度並在字符串的末尾添加三個點

回答

相關問題