使用css结合js实现html文件中的双行混排

此前写过一个使用flex布局实现html文件中的双行混排,但是感觉效果不佳。经过几天思考,我认为双行混排的要点其实是两个:

1、正文和批注的文字大小不同;

2、正文和批注的行距相互配合进行设定。

正文和批注的文字大小及行距都可以在css中设定。正文元素的宽度无需限制,真正有点难度的是设定批注元素的宽度。因为每个批注文字数量不同,如果宽度太小,批注将无法完整显示,如果根据每条批注手动设置宽度,在批注太多的时候工作量不小,而且每条批注设置多大的宽度还需要多次测试,非常麻烦,所以应该考虑使用javascript自动计算出合理的宽度并设置。计算批注元素合理的宽度很简单,只需用批注文字长度除以2并向上取整,算出这个数量后求出其宽度即可。根据上述思路,制作示例页面如下:

1、html

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
  <title>混排效果</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 <script src="main.js"></script>
 <script>
    window.onload = function(){
        var comments = document.querySelectorAll('.comment');
        comments.forEach(setCommentWidth);
    }
</script>
</head>
<body>
  <span class="content">这是一段正文文本</span> <span class="comment" >这是双行夹批混排的注释文本。</span><span class="content">文本。</span>
  <span class="comment">这是一段注释文本</span>
  <span class="content">这是一段比较长的正文文本这是一段比较长的正文文本这是一段比较长的正文文本这是一段比较长的正文文本</span> 
  <span class="comment" >这是一段比较长的注释文本。这是一段比较长的注释文本。这是一段比较长的注释文本。</span>
  <span class="content">这是一段比较长的正文文本这是一段比较长的正文文本这是一段比较长的正文文本这是一段比较长的正文文本</span> 
  <span class="comment" >这是一段比较长的注释文本。这是一段比较长的注释文本。</span>
  
</body>
</html>

2、css:

css 复制代码
.content {
	font-size:2em;
	line-height:1.5em;
}
.comment {
	font-size:1em;
	line-height:1em;
	display:inline-block;
}

3、js:

javascript 复制代码
function setCommentWidth(item, index){
  var width = item.innerText.length / 2 + 1
  item.style.width = width + 'em';
}

上面的css在定义宽度时直接使用了em做单位,这样做是比较简单的,因为1个字符宽度就是1em,中间不需要任何转换。如果用px做单位,很可能需要在em与px之间进行转换,这样算出字符数量后才方便计算出px。不影响文档DOM结构的前提下求出em与px转换系数的方法是:

javascript 复制代码
function em2px(el){
  return Number(getComputedStyle(el, "").fontSize.match(/(\d+)px/)[1]);
}

上述页面在edge中的显示效果如下:

调整一下浏览器显示区域的大小,显示效果如下:

可以看到,正文和批注可以比较好地随着显示区域的宽度改变而自动适应,双行假皮的效果也完全显示出来了,批注元素的宽度也可以随内容的长度不同而自动设置为比较合适的值。但是还可以进一步改进。从上面的截图可以看出,有一行正文文本后面有比较大的空白,而批注却从下一行开头了。这主要是因为正文文本后的空白长度小于后面的批注元素计算的长度。如果可以求出正文后面空白的长度,那么将这一条批注截断成两条批注,其中一部分紧接前面的正文,另一部分转入下一行,效果就更好了。但目前还没有想到求出正文最后一行右边空白长度的方法。

相关推荐
你的人类朋友25 分钟前
🫏光速入门cURL
前端·后端·程序员
兴趣使然_44 分钟前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码3 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder3 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法