如何动态地使文本正好适合某个区域

时间:2012-10-10 16:02:44

标签: php html css layout text

我正在设计一个与http://Obvious.com具有相似布局质量的网站(将转移到中等)。我注意到他们的布局有一些很棒的东西,有一个方面我不知道怎么做。

在主页上,当涉及到每个博文标题下方的文本行时,我发现总是有一个固定的区域,文本在文本区域内整齐地排列。如果标题较长,则下面的文字会相应调整。

这是怎么做到的?我已经尝试了一种方法来计算字符串中的字符数,当标题更长时,所选字符数量减去x个字符...但是这样做时,有时只有一个或两个字悬挂在下一个字符串中因此,线条看起来不均匀。 (我不希望看起来不均匀)

那么有没有办法确保文本始终适合行尾?文字的数量会根据标题WHILE的大小而改变吗?

这是一个PHP解决方案吗?也许CSS? JavaScript的? (ps那些我知道可以使用的语言)

请访问Obvious.com(转至中等)以供参考。

2 个答案:

答案 0 :(得分:0)

它只是一个具有一定宽度的css div

<div style="width:300px; height:400px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor justo quis urna hendrerit placerat. Ut fringilla rutrum nulla at rutrum. Nullam sagittis accumsan erat et venenatis. Maecenas luctus magna rutrum neque aliquet dictum at quis libero. Mauris at felis dolor. Nam sit amet euismod purus. Etiam tincidunt laoreet dui ut fermentum.</div>

这是我制作的http://jsfiddle.net/RZFYH/

的JsFiddle

答案 1 :(得分:0)

如果查看源代码,您会看到比实际显示的文本更多的文本传递给浏览器。他们正在做的是返回文章的前x个字符(在PHP生成的输出HTML中),然后用CSS剪切容器元素。 x值需要通过反复试验来预先确定,但实际上没有任何花哨的东西。

有关CSS文字剪辑的详细信息,请参阅https://developer.mozilla.org/en-US/docs/CSS/cliphttps://developer.mozilla.org/en-US/docs/CSS/text-overflow