如何动态地使文本适合区域正方形

我正在设计一个类似于http://Obvious.com（将转移到中）的布局质量的网站。我注意到他们的布局有一些很棒的事情，有一个方面我不知道该怎么做。如何动态地使文本适合区域正方形

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

这是如何完成的？我已经尝试过一种方法来计算字符串中的字符数量，并且当标题更长时，所选字符数量少于x个字符......但是当这样做时，有时候只有一个或两个字符会挂入下一个字符因此线条不均匀。（我不想看起来不均匀）

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

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

请访问Obvious.com（trans to Medium）以供参考。

2012-10-10 user1724095

你可以指定你指的是哪个特定元素https://developer.mozilla.org/en-US/docs/CSS/clip和https://developer.mozilla.org/en-US/docs/CSS/text-overflow？代码示例会很好。 –

它只是一个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>

这里有一个的jsfiddle我做http://jsfiddle.net/RZFYH/

来源

2012-10-10 16:11:17

不行，你忘记了溢出。添加更多文本并查看会发生什么。你必须设置overflow：隐藏，正如我上面所说的那样，否则内容会溢出div。 –

如果你看看源代码，你会看到更多的文本比实际显示传递到浏览器。他们正在做的是返回文章的前x个字符（在由PHP生成的输出HTML中），然后用CSS剪裁容器元素。 x值需要经过反复试验才能预先确定，但没有什么特别的。

请参阅有关CSS文本细节剪裁

来源

2012-10-10 16:12:08 Xophmeister

他们只是使元素的大小和设置溢出：隐藏。除了由他们正在使用的任何CMS创建的片段之外的x个字符无关。然而，这并不是控制多少个字符适合该盒子的东西。 http://jsfiddle.net/calder12/RZFYH/1/ –

是的，对不起：这不是真正的剪裁，它是溢出，如你所说（见https://developer.mozilla.org/en-US/docs/CSS/overflow ）。关于x字符：当然你可以返回文档中的所有字符，但返回第一个x的目的是为了避免返回太多的数据，因为在某个数字之后它不会被看到，这是浪费的带宽。这不是直接相关的，而是相关的。 – Xophmeister

是的，赞同和好点。 –

如何动态地使文本适合区域正方形

回答

相关问题