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

最新推荐文章于 2023-08-26 09:28:40 发布
最新推荐文章于 2023-08-26 09:28:40 发布
阅读量1.4k 收藏
点赞数
分类专栏： html css js 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tao111369/article/details/83151173
版权
js 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

效果如图所示：

思路：

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>

 

一个菜鸟的奋斗之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
暑假第一周周记 两端对齐和label标签
qq_63660369的博客
06-11 312
周记
css 文本两端对齐应用实例
01-19
auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
css实现不同浏览器下兼容文本两端对齐
12-28
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如： 比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者占位符更精准，我之前也都是这么做的。但是写的多了之后开始思考能不能抽象出来用于更多的场景？让代码更好看一些？维护成本更低一些？ 1、首先想到是能不能直接靠 css 解决问题 css .test-justify { text-align: justify; } html 测试文本 好吧，text-align:justi
css两行文字两端对齐
有问题可关注公众号：前端研究院 后台输入问题回复
03-25 505
效果如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> span{ display:inline-block; ...
关于两个汉字和三个汉字左右对齐的问题
Mr_Tony的专栏
01-21 4408
例题：学校，所在省 这三个字垂直排列，"学"和"所"对齐,"效"和"省"对齐。 有两种方式: 1、可以采用在中间加全角空格的方式来进行对齐 2、在中间加四个 进行对齐 第一种方式在有时候会出现即使加了很多个空格，但显示的时候依然显示一个空格的问题。第二种暂时没发现这种问题
html js设置窗口大小,[转载]JS和CSS实现自动根据分辨率设置页面宽度
weixin_29081163的博客
06-09 759
为了实现自动根据分辨率设置页面宽度，首先我们要先知道一个JavaScript脚本document.documentElement.clientWidth获取页面宽度。为了说明在IE和FireFox等浏览器中都能实现兼容效果，我说明两种情况支持W3C和不支持W3C，当然从标准的角度讲建议支持W3C。支持W3C1、DOCTYPE设置http://www.w3.org/TR/xhtml1/DTD/xht...
文字两端对齐
阿毛的博客
04-14 384
<head> <meta charset="UTF-8"> <title>文字两边对齐</title> <style> div{ width:65px; text-align-last: justify; } </style> </head> <body> <div>地址</div&.
文本对齐text-align:justify实现文字两端对齐
sxy323的博客
08-26 312
文本对齐text-align:justify实现文字两端对齐。
html 怎么设置文本对齐，文本间距，盒子居中显示
m0_65033248的博客
04-09 5289
html盒子中怎么将文本和元素居中显示
【uniapp/nvue/js】nvue中 实现文本两端对齐效果 的 js解决方案
Celeste的博客
09-02 3740
js代码实现在nvue中 文本两端对齐效果 前言 在你因为搜索关键词来到我这篇文章时，相信你已经深深的感受到nvue格式对样式编写的局限性了。 比如，在nvue中不能用text-align：justify设置文本两端对齐。 本人发现这个样式不能使用后，思考了许多代替解决的方法。但最终却发现，这个nvue吧，简直是把css两端对齐的方法全堵死了！text-align：justify不能用，letter-spacing 改字间距也不能用。 可是吧，需求又有这个需求，也不能不做不是？ 毕竟上面某位对这种小细节很
CSS columns实现两端对齐布局的示例代码
12-28
兜兜转转一大圈，最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。 例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为： .container { columns: 3 30px; } 叮咚，结束了，game ...
css文本两端对齐的实现代码
09-22
主要介绍了css文本两端对齐的实现代码,需要的朋友可以参考下
4.jsx语法有关规则
qq_24871849的博客
12-17 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title{ background-color: orange; width: 200px; } </style> </head> <body> <!-- 准备好一个
css+js解决文本两端对齐以及分散对齐
nieshanfeng1的专栏
02-14 1万+
一个很简单的设计排版样式，A图表示居左对其，但实际上我们想要的可能是B所示的对齐方式。 这就是传说中的两端对齐 还有一种更确切的说法是两端分散对齐。 最开始的时候 ，我试图使用CSS来解决这个小问题，查阅了很多办法，发现没有一种完美兼容的解决方式。 在一些csser使用了css的两端对齐方案是基于 text-align:justify 及 text-align-last:justify
html页面文字左右两端对齐
Generalsphper的博客
02-23 2万+
我遇到问题是：看不到效果，无论是英文还是中文，在IE和chrome下都不起作用。这是在网上找到的解决方法 ：）css样式：div.justify { 　　text-align: justify; width:200px; font-size:15px; color:red; 　　border:1px solid blue; height:18px; } div.justify > span
两端对齐文本效果
boysky0015的博客
10-08 2866
平时我们会遇见这样的情况，比如一个表单中的姓名、手机号、邮箱、密码。要求文字两端对齐，我们该如何实现。例如下面这样的效果： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0;
实现文字两端对齐
weixin_zsh的博客
08-02 2678
页面开发遇到需要实现文字两端对齐的时候很多，主要使用的是 text-align:justify; text-align 属性规定元素中的文本的水平对齐方式 但是事实上，在实现两端对齐时，仅设置text-align:justify 实现不了的，还要加上 一个span标签，设置padding-left:100% ，虽然我也不知道为什么。 这是一个小demo &lt;!DOCTYPE...
HTML如何让文本两端对齐
Be yourself.
03-15 3万+
Question 之前看一个外文网站，貌似都不是两端对齐，我想把他转换为PDF文件下载下来。不是两端对齐看起来太难受了。找了个方法。 Solution &lt;p style="text-align:justify; text-justify:inter-ideograph;&gt;日本驻华大使丹羽宇一郎:日中关系比夫妻还紧密日本驻华大使丹羽宇一郎:日中关系比夫妻还紧密日本驻华大使丹羽宇...
js和jquery动态实现radio选中触发事件
热门推荐
tao111369的博客
12-26 5万+
最近写的功能是根据radio选中不同的值实现触发对应的事件，现将实现方法总结如下： html如下： &lt;div id="div_pathType"&gt; &lt;input name="pathType" class="page_input_radio" id="pathType" type="radio" checked="" value=&quot
fabric.js写一个按钮
最新发布
09-25
### 回答1： 好的，我来为你简单讲解一下如何使用 Fabric.js 创建一个按钮。 首先，你需要在页面中引入 Fabric.js 的库文件。然后，可以使用 Fabric.js 的 `fabric.Rect` 和 `fabric.Text` 类来创建一个矩形和一个文本框。 然后，你可以使用 `fabric.Group` 类将这两个对象组合在一起，并将它们添加到画布上。 具体实现方法如下： ```javascript // 创建一个矩形对象 var rect = new fabric.Rect({ width: 100, height: 50, fill: '#ff0000' }); // 创建一个文本框对象 var text = new fabric.Text('按钮', { fontSize: 20, fill: '#ffffff' }); // 将矩形和文本框组合在一起 var button = new fabric.Group([rect, text], { left: 100, top: 100 }); // 将按钮添加到画布上 canvas.add(button); ``` 这样，你就可以在画布上看到一个红色的按钮，上面写着"按钮"。 你还可以给按钮添加点击事件，具体方法如下： ```javascript button.on('mousedown', function() { // 点击按钮时执行的代码 }); ``` 希望这能帮到你。 ### 回答2： 在fabric.js中，我们可以使用fabric.Button类来创建一个按钮。下面是一个使用fabric.js创建按钮的示例代码： ```javascript // 创建 Canvas 对象 var canvas = new fabric.Canvas('canvas'); // 创建按钮对象 var button = new fabric.Button({ width: 100, // 按钮宽度 height: 50, // 按钮高度 left: 50, // 按钮左侧位置 top: 50, // 按钮顶部位置 fill: 'blue', // 按钮颜色 label: 'Click Me', // 按钮文本 fontSize: 20, // 按钮文本字体大小 textAlign: 'center' // 按钮文本对齐方式 }); // 将按钮添加到 Canvas 上 canvas.add(button); // 监听按钮的点击事件 button.on('selected', function() { alert('按钮被点击了！'); }); ``` 在这个例子中，我们首先创建一个Canvas对象，然后使用fabric.Button类创建一个按钮对象。我们可以通过设置按钮的各种属性（如宽度、高度、位置、颜色、文本等）来自定义按钮的样式。最后，我们将按钮添加到Canvas上，并监听按钮的点击事件。 这样，我们就成功在fabric.js中创建了一个简单的按钮。你可以根据自己的需求来进一步自定义按钮的样式和功能。 ### 回答3： fabric.js是一个用于创建交互式Web图形的JavaScript库。要使用fabric.js创建一个按钮，您可以按照以下步骤操作： 1. 首先，您需要创建一个canvas元素，以便在其中绘制和交互按钮。您可以使用HTML中的`<canvas>`标签创建一个canvas元素，并将其添加到页面中的适当位置。 2. 在您的JavaScript代码中，引入fabric.js库，并使用fabric.Canvas类创建一个canvas实例。将canvas实例与HTML中的canvas元素关联。 3. 接下来，您可以使用fabric.js提供的方法和属性来创建一个按钮形状。例如，您可以使用`fabric.Rect`类创建一个矩形对象，并设置其宽度、高度、填充颜色等属性。 4. 使用`canvas.add()`方法将按钮对象添加到canvas中。 5. 要使按钮具有交互性，您可以为按钮对象添加事件处理程序。例如，您可以为按钮对象添加`mousedown`事件处理程序，以便在用户点击按钮时执行相应的操作。 6. 最后，将canvas对象绘制到页面上，以便用户能够看到按钮。使用`canvas.renderAll()`方法将canvas对象渲染到页面上。 下面是一个简单的示例代码，展示了如何使用fabric.js创建一个按钮： ```html <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script> </head> <body> <canvas id="canvas" width="400" height="200"></canvas> <script> // 创建canvas实例 var canvas = new fabric.Canvas('canvas'); // 创建按钮形状 var button = new fabric.Rect({ width: 100, height: 50, fill: 'blue', left: 50, top: 50 }); // 为按钮添加事件处理程序 button.on('mousedown', function() { alert('Button clicked!'); }); // 将按钮添加到canvas中 canvas.add(button); // 渲染canvas canvas.renderAll(); </script> </body> </html> ``` 希望这个简单的示例能够帮助您了解如何使用fabric.js创建一个按钮。请根据实际需求自行调整按钮的形状、样式以及事件处理程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值