【css】css实现文字两端对齐效果:


一、方法1:

给元素设置 text-align: justify;text-align-last: justify;并且加上text-justify: distribute-all-line; 目的是兼容ie浏览器

p{
   
   width: 130px;
   text-align: justify;
   text-align-last: justify;
   /*兼容ie*/
   text-justify: distribute-all-lines;
}
二、方法2:

设置 text-align,并且设置伪元素 after或者 before的样式,伪元素中可以添加width:100%或padding-left:100%都可以实现我们所要的效果。

p {
   
   width: 200px;
   height: 30px;
   text-align: justify;
}

p::after {
   
    content: "";
    display: inline-block;
    /* padding-left: 100%; */
    width: 100%;
}
三、注意:

text-align-last: justify;只对中文文字起效果,而对于数字和英文字母则需要使用空格间隔开,再使用上述两种方法之一,就可以实现文字两端对齐了

image.png
image.png

相关推荐

  1. QLabel文字两端对齐解决方案

    2023-12-13 02:54:02       39 阅读
  2. flutter中实现首行缩进两端对齐

    2023-12-13 02:54:02       6 阅读
  3. gsap实现文字动画效果02

    2023-12-13 02:54:02       37 阅读
  4. CSS实现文字呼吸灯效果

    2023-12-13 02:54:02       27 阅读
  5. C语言实现彩色文字闪烁效果

    2023-12-13 02:54:02       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-13 02:54:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-13 02:54:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-13 02:54:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-13 02:54:02       18 阅读

热门阅读

  1. 网络编程发送接受多案例

    2023-12-13 02:54:02       38 阅读
  2. C++学习笔记(十四)

    2023-12-13 02:54:02       35 阅读
  3. python 中Windows编程一些心得

    2023-12-13 02:54:02       44 阅读
  4. 【算法集训】基础数据结构:四、栈

    2023-12-13 02:54:02       44 阅读
  5. linux链表应用2

    2023-12-13 02:54:02       40 阅读
  6. 2.2运行时数据区域----2.2.3本地方法栈

    2023-12-13 02:54:02       36 阅读
  7. Linux中的iptables

    2023-12-13 02:54:02       32 阅读
  8. vue:this.reload()跟this.$router.replace的区别

    2023-12-13 02:54:02       44 阅读
  9. C语言L / 数据在内存中的存储

    2023-12-13 02:54:02       31 阅读
  10. c# 十进制整数格式化-(占位符,补齐)

    2023-12-13 02:54:02       47 阅读
  11. 申论笔记(思路技巧)

    2023-12-13 02:54:02       37 阅读
  12. 分享一个Pinia存储的数据持久化插件

    2023-12-13 02:54:02       37 阅读