如何僅使用css顯示字符串的一部分

我希望能夠顯示最多10個字符的字符串。如果字符串超過10個字符，我想在末尾附加'...'。如何僅使用css顯示字符串的一部分

舉例來說，如果我有字符串：

'helloworldmynameisryan'

我希望它會顯示如下所示：

'helloworld...'

我只是顯示在這樣一個div我的字符串：

<div>DisplayMessage</div>

是否有一個我可以創建的類只適用於字符串超過10個字符？

來源

2013-03-14 R Doolabh

一個確切的字符數是難以/不可能的，但可以肯定它限制寬度：http://stackoverflow.com/questions/15124838/how-to-keep-div-on-one-line -and-append-ellipses/15124873＃15124873 – 2013-03-14 04:31:27

字符數不會與CSS一起使用。正如Tim提到的那樣，您的解決方案必須基於寬度。這是一個簡單的解決方案：http://jsfiddle.net/8atfj/ – slamborne 2013-03-14 04:33:31

不幸的是，沒有一個好的跨瀏覽器的方式來使用CSS來做到這一點。 '文本溢出'依賴於字符串的寬度，而不是你需要的字符串的長度。

您可以使用字符串。長度屬性在javascript來實現這一

function ellipsify (str) { 
    if (str.length > 10) { 
     return (str.substring(0, 10) + "..."); 
    } 
    else { 
     return str; 
    } 
}

希望這有助於。

來源

2013-03-14 04:38:47

它叫做省略號，你可以在塊元素上使用它。

但是它在Firefox中不起作用，並且不能將寬度設置爲10個字符，因爲您無法在css中指定字符寬度。

如果您只需要10個字符和Firefox兼容性，則必須使用JavaScript或服務器端解決方案。

檢查省略號：http://www.quirksmode.org/css/textoverflow.html

或試試這個：

.ellipsis{ 
white-space:nowrap; 
overflow:hidden; 
} 

.ellipsis:after{ 
    content:'...'; 
}

jQuery插件這樣的：

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

來源

2013-03-14 04:27:10 Amrendra

不使用任何serverside腳本或javascript你不能做到這一點。

使用以下功能。

function LimitCharacter($data,$limit = 20) 
{ 
    if (strlen($data) > $limit) 
    { 
     $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...'; 
     return $data; 
    } 
    else 
    { 
     return $data; 
    } 
}

稱其爲LimitCharacter($yourString,5);

的Javascript

var str = 'Some very long string'; 
if(str.length > 10) str = str.substring(0,10)+"...";

CSS

.limtiCharClass { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
}

來源

2013-03-14 04:27:16

http://www.electrictoolbox.com/ellipsis-html-css/ – 2013-03-14 04:34:01

的省略號是CSS3功能和迪菲測試時租用瀏覽器它有問題。一個快速解決的辦法是定義一個特定的與div或跨度隱藏溢出，然後添加一個背景圖像，說：「...「

來源

2013-03-14 04:29:28

-1

據quirksmode，如果還有很長的文字像

<div>11111111111111111111111111111111111111111111111111111111</div>

爲了把這個包你有很多方法，使用<wbr>標籤像下面

<div>111111111111111111111111111<wbr>11111111111111111111111111111</div>

將顯示如下
或使用代替，輸出將是

111111111111111111111- 
1111111111111111111111

或者如果您正在尋找JS解決方案，請使用this。

來源

2013-03-14 04:36:06 Exception

問題是關於截斷，而不是包裝。 – 2013-03-14 06:17:10

Firefox實際上現在支持這一點，你只需要確保無論你試圖「截斷」的塊級格式和寬度 - 這可能是父級。

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display:block; 
    width : 100px; /* this could be defined on any parent */ 
}

來源

2013-03-14 05:45:11

爲什麼100px會顯示10個字符，除非意外？ – 2013-03-14 06:16:09

看起來比JavaScript解決方案更好，更乾淨，更快捷。 – iLevi 2013-03-14 16:53:07

如何僅使用css顯示字符串的一部分

回答

相關問題