切斷效果與溢出：隱藏

我想創建在CSS如下：切斷效果與溢出：隱藏

我已經應在一行中顯示很長的文字，這段文字旁邊的超鏈接（這將以後放在網站的標題中，這就是爲什麼它需要成爲一條線）。

當屏幕上沒有空間時，我想將字符串切斷（「testtest ..」 - 超鏈接）。當窗口調整大小，並有更多的空間時，我希望顯示的文本（儘可能多（例如「testtesttesttesttesttesttesttest ..-超鏈接」）。

我遇到的問題是字符串doesn 「不想被切斷它始終保持其全尺寸

這裏是對的jsfiddle鏈接：。http://jsfiddle.net/PNGDw/1/

注：在這裏我有一張桌子嘗試它，我也試着它與浮游物，但也沒有工作。

感謝您的幫助

來源

2012-04-24 Team-JoKi

你有一個5em寬度的表，所以它不會調整大小。使用類似：

<style> 
    * 
    { 
     margin: 0; 
     padding: 0; 
    } 

    body 
    { 
     background: #5e8834; 
    } 

    div.wrapper  { 
     background: #456326; 
     border: 3px solid #547a2f; 
     margin: 2em; 
     width: 100%; 
    } 
    div.contents{ display:inline-block;} 
    .should-cut-off 
    { 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     width: 70%; 
    } 
</style> 
<div id='wrapper'> 
    <div class="should-cut-off contents">Test - test - test - Test - test - test - Test - test - test - Test - test - test 
      - Test - test - test 
    </div> 
    <div class='contents' style="width:15%;"> 
     <a href="#">[this is a link]</a> 
    </div> 
</div>

來源

2012-04-24 12:57:59

非常感謝，我知道它必須是這樣的東西-_- – 2012-04-24 13:05:19

配置它顯示爲inline-block的

.should-cut-off 
{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 70%; 
    display: inline-block; 
}

Demo

來源

2012-04-24 12:48:08 Starx

當調整頁面這並不做任何事情：/文本應該會被截斷時，沒有足夠的空間來顯示 – 2012-04-24 12:52:34

我創建了trimms文本的JavaScript函數，並且我更新上調整文字大小。這裏是一個演示：http://jsfiddle.net/HaFzd/3/

來源

2012-04-24 12:49:47 gabitzish

這確實是我想要的效果，但我m很確定我可以「輕鬆」地用一些css來解決這個問題（非常感謝你的努力！如果事實證明我不能在css中完成，我將使用你的解決方案） – 2012-04-24 12:55:05

我創建了一個打火機版本：http://jsfiddle.net/HaFzd/7/ – gabitzish 2012-04-24 13:14:25

切斷效果與溢出：隱藏

回答

相關問題