在格式化后将文本截断为特定行数

我正在制作一个网站，它将显示来自YouTube API的一些视频，并且会将视频说明截断为服务器端的170个字符。他们必须进入一个狭窄的盒子，因此无论何时它包含URL或长词使其包装很多时，它有时会溢出容器。是否有一个客户端方式截断字符串并在最后添加一个省略号（我可以使用overflow：hidden，但是我不能使用省略号，这是我的最后手段）。这里下面在格式化后将文本截断为特定行数

是什么，我试图做一个形象：

It should look like this

来源

2013-12-19 JackW

你现在正在做什么代码？你能提供一个jsfiddle，以便我们可以看到你正在尝试做什么？ – MattD

请参阅：[this]（http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines）和[this]（http：//www.mobify。 com/blog/multiline-ellipsis-in-pure-css /） – tjboswell

@teabos谢谢！你用jQuery插件链接的stackoverflow正是我所期待的。 – JackW

你可以使用text-overflow:ellipses;可惜这次只white-space:nowrap这是我不认为你需要的作品。

什么你可以做的是做overflow:hidden像你预期的，并与伪元素:after假的椭圆。

Imaginge你有你的DIV文字：

<div id="text"> 
    (really long text here) 
</div>

造型设计是这样的：

#text { 
    background:white; 
    width:150px; 
    height:100px; 
    position:relative; 
    overflow: hidden; 
}

只是添加到它

#text:after { 
    content:'...'; 
    position:absolute; 
    bottom:0; 
    right:0; 
    background:inherit 
}

和宾果：http://jsfiddle.net/tFZEb/3/

来源

2013-12-19 15:56:28

工作正常，但即使字符串被截断，但它仍然会添加它，但使用少量的javascript我可以修复该问题。谢谢您的帮助！ – JackW

的上ly原生方式以省略号结束多行文本是 -webkit-box & -webkit-line-clamp极小的支持。

div{ 
width:150px; 
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 2; /* number of lines to show */ 
-webkit-box-orient: vertical; 
}

例如http://jsfiddle.net/rmy2Y/

其他你需要找到一些CSS黑客或JS脚本。

来源

2013-12-19 15:57:37 cocco

在格式化后将文本截断为特定行数

回答

相关问题