使用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中的显示效果如下:

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

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

相关推荐
前端_学习之路35 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_37 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css