当前位置: 首页 > news >正文

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

文章目录

            • 一、方法1:
            • 二、方法2:
            • 三、注意:


一、方法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

http://www.lryc.cn/news/260830.html

相关文章:

  • ElasticSearch指南 - Mapping - Metadata fields
  • 12.15每日一题(备战蓝桥杯摘花生)
  • VUE-脚手架搭建
  • ArcGIS Pro SDK根据Xml/Json文件反向生成几何
  • LY/T 3301-2022 实木厚芯胶合板检测
  • 代码随想录算法训练营第十六天| 104. 二叉树的最大深度、111. 二叉树的最小深度、222. 完全二叉树的节点个数
  • 字符串——OJ题
  • Linux---cp和mv命令选项
  • LVS负载均衡器(nat模式)+nginx(七层反向代理)+tomcat(多实例),实现负载均衡和动静分离
  • 【深度学习】TensorFlow深度模型构建:训练一元线性回归模型
  • 智能插座是什么
  • 5G工业网关视频传输应用
  • Axure电商产品移动端交互原型,移动端高保真Axure原型图(RP源文件手机app界面UI设计模板)
  • 【k8s】使用Finalizers控制k8s资源删除
  • vscode
  • Jrebel 在 Idea 2023.3中无法以 debug 的模式启动问题
  • 【C++】模版初阶(初识模版)
  • 智能优化算法应用:基于差分进化算法3D无线传感器网络(WSN)覆盖优化 - 附代码
  • 10 种隐藏元素的 CSS 技术
  • SQL Server数据库使用T-SQL语句简单填充
  • 逻辑回归代价函数
  • 芯知识 | WT2003Hx系列高品质语音芯片MP3音频解码IC的特征与应用优势
  • node.js 启一个前端代理服务
  • 弹性搜索引擎Elasticsearch:本地部署与远程访问指南
  • 微信小程序生成二维码海报并分享
  • Windows安装Tesseract OCR与Python中使用pytesseract进行文字识别
  • 【答案】2023年国赛信息安全管理与评估第三阶段夺旗挑战CTF(网络安全渗透)
  • springboot 集成 redis luttuce redisson ,单机 集群模式(根据不同环境读取不同环境的配置)
  • PPT插件-好用的插件-PPT 素材该怎么积累-大珩助手
  • qt 正则表达式简单介绍