CSS实现多行文本两端对齐及下划线效果
在网页设计中，经常需要对多行文本进行特殊样式处理，例如实现两端对齐并添加下划线。本文将介绍如何使用CSS高效地实现这一效果。
需求分析
目标是创建一个CSS样式，使多行文本满足以下条件：
动态行数: 能够适应不同行数的文本内容。自定义下划线: 可以调整下划线的颜色和与文本的垂直距离。两端对齐: 文本内容两端对齐显示。
解决方案
我们采用CSS的text-align: justify;实现两端对齐，并巧妙利用background-image和线性渐变模拟下划线效果，避免使用实际的
标签带来的布局问题。
基础样式: 设置文本的基本样式，包括字体大小、行高等。
立即学习“前端免费学习笔记（深入）”；
Otter.ai
一个自动的会议记录和笔记工具，会议内容生成和实时转录
91 查看详情 
.justified-text { font-size: 14px; line-height: 25px; text-align: justify; /* 两端对齐 */ text-justify: inter-word; /* 处理单词间距 */}
模拟下划线: 使用线性渐变作为背景图片，创建下划线效果。颜色和位置可自定义。
.justified-text { /* ... (基础样式) ... */ background-image: linear-gradient(to right, #000000, #000000); /* 黑色下划线 */ background-position: bottom; background-size: 100% 2px; /* 调整下划线厚度 */ background-repeat: no-repeat; padding-bottom: 5px; /* 调整下划线与文本的距离 */}
您可以将#000000更改为其他颜色，调整background-size控制下划线厚度，以及padding-bottom调整下划线与文本的间距。
通过以上CSS代码，即可轻松实现多行文本的两端对齐和下划线效果。 记住将.justified-text类应用于包含您需要格式化文本的HTML元素。 text-justify: inter-word; 确保在两端对齐时单词间距合理。 这种方法比直接使用border更灵活，也更易于控制样式。
以上就是如何通过CSS让多行文本两端对齐并添加下划线？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1113540.html
微信扫一扫 
支付宝扫一扫 
![Go语言字符串操作：深入理解s[0]（字节）与s[:1]（字符串）的差异](https://www.chuangxiangniao.com/wp-content/uploads/2025/12/176058764689207-480x300.jpg)
