php - 如何动态地使文本正好适合一个区域

标签 php html css layout text

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

在主页上,当涉及到每篇博文标题下方的文本行时,我看到总是有一个固定区域,并且文本在文本区域内整齐地排列成正方形。此外,如果标题较长,下面的文字也会相应调整。

这是怎么做到的?我尝试了一种计算字符串中字符数的方法,当标题较长时,所选字符数量减少 x 个字符......但是这样做时,有时只有一个或两个单词卡在下一个单词中因此线条看起来不均匀。 (我不想要不均匀的外观)

那么有没有办法确保文本总是适合行尾呢?文本的数量会根据标题的大小而变化吗?

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

请访问 Obvious.com(trans to Medium)以供引用。

最佳答案

只是一个有一定宽度的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/

关于php - 如何动态地使文本正好适合一个区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12823672/

相关文章:

php - 错误 : The path to the driver executable must be set by the webdriver. gecko.driver 系统属性

php - 递归查找所有音频文件并随机播放

javascript - 在模态内显示图像,即使它是相同的图像

jquery - 修复了 <table> 中的 <thead>

php - 使用 PHP 获取 CSV 导出的列名和数据 (MYSQL)

php - SQL多对多选择查询

php - auth()->loginUsingId(1); 之间有什么区别与 Auth::loginUsingId(1); 比较

javascript - 为什么在 angularjs 中与 ng-model 一起使用时,html 中的值属性不起作用?

javascript - 如何在 Bootstrap 4 中切换 font-awesome 图标和可折叠图标?

html - 选中框时移动复选框标签