切断效果与溢出：隐藏

我想创建在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

切断效果与溢出：隐藏

回答

相关问题