通过css和js设置内容不确定的两行文字两端对齐

效果如图所示：

思路：

1.先通过css样式设置两行两端对齐，但是会有一个问题，随着两行的内容的不确定，没办法固定两行的宽度，通过第二步解决

首先元素添加如下声明达不到效果

text-align: justify;

然后对元素的父元素添加声明注意：（只给元素本身添加对齐的声明）

text-align: justify; 
text-align-last: justify; 
text-justify: inter-ideograph;

第一步也可参考博客https://my.oschina.net/chaojiaheng/blog/1793540

2.通过就是的方法动态设置两行的宽度，并让其保持相等

resetRight();
window.onresize=function(){
    resetRight();
}
function resetRight(){
	var wether1ScrollWidth= document.getElementById("wether1").scrollWidth;
	var wether2ScrollWidth= document.getElementById("wether12").scrollWidth;
	if(wether1ScrollWidth>=wether2ScrollWidth){
		document.getElementById("wether12").style.width = wether1ScrollWidth+"px";
	}else{
		document.getElementById("wether1").style.width = wether2ScrollWidth+"px";
	}
}

全部代码贴在下面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
	.wether1{
		font-family:Microsoft YaHei;
		position: absolute; 
		font-size:28px;
		text-shadow:#000 0.5px 1px 0.5px;//设置文字投影
		margin:5px 0 0 20px;
		color:#2DA6DB;
		text-align: justify;
	}
	.wether12{
		text-shadow:#000 0.5px 1px 0.5px;
		color:#2DA6DB;
		position: absolute; 
		font-size:15px;
		margin:45px 0 0 20px;
		text-align: justify;
	}
	.wetherDiv{
		border:1px solid #2DA6DB;
		text-align: justify; 
		text-align-last: justify; 
		text-justify: inter-ideograph;
		height:100px;
		width:500px;
	}
	</style>
 </head>

 <body>
    <div id="wetherDiv" class="wetherDiv">
        <span id="wether1" class="wether1">今天天气很好</span>
        <span id="wether12" class="wether12">It's a nice day today</span>
    </div>
 </body>
 <script language="javascript">
    resetRight();
    window.onresize=function(){
     resetRight();
    }
    function resetRight(){
        var wether1ScrollWidth= document.getElementById("wether1").scrollWidth;
        var wether2ScrollWidth= document.getElementById("wether12").scrollWidth;
        if(wether1ScrollWidth>=wether2ScrollWidth){
            document.getElementById("wether12").style.width = wether1ScrollWidth+"px";
        }else{
            document.getElementById("wether1").style.width = wether2ScrollWidth+"px";
        }
    }
</script>
</html>

通过css和js设置内容不确定的两行文字两端对齐

猜你喜欢