html - html5 或 css '智能文本流' 将句子或段落均匀分布在同样宽的行上?
问题描述
假设我有一个动态 HTML 元素(aspan
或div
其他),其中包含一个句子或一段文本,如下所示:
现在如果我把句子稍微长一点,它可能需要额外的一行,像这样:
请注意最后一个单词是如何在单独的行上的。所以前两行已满。从某种意义上说,它们占据了这个元素中的全部可用空间。第三行只包含一个单词,而且大部分都是空的。
我觉得这很令人不安,我想知道是否有一个技巧可以在所有行之间更均匀地分配可用空间。我的意思是这样的:(请注意,这是完全相同的句子)
它应该根据字体和浏览器视图大小以及元素的宽度自动重新流动,这可能取决于屏幕分辨率。
有没有一些聪明的 HTML5 或 CSS3 方法来实现这一点?
在搜索和查看与此问题类似的主题后,我确实找到了text-align: justify
我熟悉但并不是我真正想要的属性。
text-align: justify
倾向于通过增加单词之间的空格来将所有行扩展到包含元素的完整。
相反,我真正要寻找的是重新分配单词的东西,以便所有行都更窄,即不占用所有水平元素空间。以某种方式导致所有线条都一样宽(或尽可能接近)。
所以我的意思是不喜欢这样:(这是什么text-align:justify
)
将此与上面的示例进行比较。
解决方案
我知道您要求提供 CSS 解决方案,但我认为还没有。以下是我的 JS 解决方案。
function createBetterLineBreaks(el) {
var originalWidth = el.offsetWidth;
var originalHeight = el.offsetHeight;
for (let i = originalWidth - 1; i >= 0; i--) {
el.style.width = `${i}px`;
if (el.offsetHeight > originalHeight) {
el.style.width = `${i + 1}px`;
break;
}
}
}
// hover effects
document.querySelector('.box').addEventListener('mouseenter', function () {
createBetterLineBreaks(document.querySelector('.box .text'));
});
document.querySelector('.box').addEventListener('mouseleave', function () {
document.querySelector('.box .text').style.width = 'unset';
});
.box {
width: 300px;
font-size: 30px;
border: 1px solid black;
border-radius: 5px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="box"><span class="text">hover this box to distribute the text more evenly</span></div>
推荐阅读
- microsoft-graph-api - Microsoft Graph-Delete planner task-Resource not found for the segment (ETag)?
- python - 有没有更好的方法来区分书名和作者?
- coldfusion - 获取运行时 ColdFusion 语法树?
- python - PIL putpixels 函数
- ruby-on-rails - Rails routes.rb 帮助
- java - 如何使我的应用程序延迟并在循环的每次迭代中更新布局的组件
- c - 如何在 C 中有效地拆分字符串和复制子字符串?
- r - 从 data.table 包中读取带有 fread 函数的 zip 文件时出错
- docker - 如何在 Dockerfile 中将 Ubuntu 包/存储库转换为 Alpine?
- angular - Angular 7 从 json 中获取多个值