HTML中使用Flex布局实现双行夹批效果

飞舞的彩虹123 · 发表于 2024-4-19 20:15:58

古代小说中经常有评点和批注，为了区别正文和批注，一般将批注排版成双行夹批的形式。我们知道，在

Word

复制代码

中只需要先选择批注文字，然后通过“开始”菜单“段落”面板上字符缩放工具组里的“双行合一”命令，就可以很容易实现双行夹批效果。如下图所示：

那么，如何在

HTML

复制代码

文件中实现这样的效果呢？
在

HTML

复制代码

中，有一种显示布局叫做

flex

复制代码

，只要定义一个布局为

flex

复制代码

的容器，这个容器的直接子元素就成为

flex

复制代码

元素，从而可以模拟上面的双行夹批效果。代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Flex Words</title>
<style type="text/css">
.container {
display: flex; /*使用flex布局方式*/
flex-direction: row;/*子元素的排列方向*/
justify-content: left; /*容器的对齐方式 */
align-items: center;/*子元素的对齐方式，主要靠这个实现文字的垂直方向对齐*/
flex-wrap: wrap;/*实现多行Flex容器*/
}
.content{
font-size:1.4em;
}
.comment{
font-size:0.5em;
}
span{
display:inline;
}
</style>
</head>
<body>
<div class="container">
<span class="content">以备选择为公主、郡主入学陪侍，充为才人、赞善之职。</span>
<span class="comment" style="width:20em;">【甲戌侧】一段称功颂德，千古小说中所无。</span>
<span class="content">二则自薛蟠父亲死后，各省中所有的买卖承局、总管、伙计人等，见薛蟠年轻不识世事，便趁时拐骗起来，二则自薛蟠父亲死后，各省中所有的买卖承局、总管、伙计人等，见薛蟠年轻不识世事，便趁时拐骗起来，二则自薛蟠父亲死后，各省中所有的买卖承局、总管、伙计人等，见薛蟠年轻不识世事，便趁时拐骗起来，</span>
<span class="comment" style="width:12em;">【蒙侧】我为创家立业者一哭。</span>
</div>
<div class="container">
<p class="content">这是另一段正文</p>
<p class="comment" style="width:8em;">这是一个双行显示的注释</p>
<p class="content">这是另一段正文中的文字</p>
<p class="comment" style="width:6em;">双行合一实现示例</p>
</div>
</body>
</html>

复制代码

上述页面显示效果如下：

从上图可以看出，

flex

复制代码

布局相比于

Word

复制代码

局限性还是很大的，首先是子元素尺寸超过容器的宽度或高度时，即使使用了

flex-wrap: wrap

复制代码

，还是不能防止元素尺寸过大时不同的子元素被换行显示（即使子元素是行内元素

span

复制代码

），其次是对所有需要双行显示的内容，需要针对每一块内容确定合适的宽度，否则没有理想的双行夹批显示效果。
在

HTML

复制代码

中，还可以用

table

复制代码

元素来实现双行夹批效果，但比

flex

复制代码

布局代码更复杂，效果也不见得更理想。看来在

HTML

复制代码

中双行夹批效果的实现还任重道远啊！
到此这篇关于HTML中使用Flex布局实现双行夹批效果的文章就介绍到这了,更多相关HTML双行夹批内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

泽泽 · 发表于 2024-5-1 20:18:41

让我们一起努力

cwj3391 · 发表于 2024-5-3 15:32:50

能给个链接吗？我想深入了解一下。

莫失莫忘Mi · 发表于 2024-5-8 11:53:09

感谢分享，受益匪浅！

战丿益达 · 发表于 2024-5-11 19:38:40

我完全同意你的观点

Q@Q · 发表于 2024-5-19 16:34:34

顶一个，观点非常中肯！

梦里七彩虹 · 发表于 2024-5-21 16:31:22

我想了解更多

4358799221 · 发表于 2024-6-30 10:18:14

顶一个，观点非常中肯！

绝影刀 · 发表于 2024-7-12 18:57:02

我不太确定，可能需要再确认一下。

Lily大爱自己 · 发表于 2024-7-13 06:44:50

牛逼

		自动登录	找回密码
密码			立即注册

HTML中使用Flex布局实现双行夹批效果

本帖子中包含更多资源

热心会员

付费会员