css 文字多行对齐

您所在的位置：网站首页 › 怎么样让上下两行字两端对齐呢 › css 文字多行对齐

css 文字多行对齐

2024-07-11 01:16| 来源: 网络整理| 查看: 265

image.png

如何实现图中两行文字对齐呢？？？

使用text-align:justify 让多行文字两端不对齐的对齐，但是单行字无效

文字文字文字文字文字文字文hi字文字hi文字 hi文字hi文字j文字文字ssss文字文字文字文字文字kkkk文字文字文字文字文字文字文字文字文字文ssss字文字文字文字文字文字文字文字

image.png

p标签加上style="text-align:justify"后，

image.png 图中是两个单行文字，那该如何对齐呢：使用伪元素，添一行就可以多行对齐啦 image.png

/现在太高了，所以要去掉这个蓝线，所以要先定行高/

image.png 定完行高，蓝线就出来了，再使用overflow：hidden 消灭掉 image.png

最终效果：

image.png

代码：

多行文字居中 span{ display:inline-block; border:1px solid green; width:5em; text-align:justify; /*现在太高了，所以要去掉这个蓝线，所以要先定行高*/ line-height:20px; height:20px; overflow:hidden; } span::after{ content:''; display:inline-block; border:1px solid blue; width:100%; } 姓名联系方式

【本文地址】

css 文字多行对齐

css 文字多行对齐

今日新闻

推荐新闻