css实现两个字和三个字的两端对齐

月伤59

已于 2024-08-08 10:22:46 修改

阅读量319

点赞数 2

文章标签： css 前端

于 2024-08-08 10:05:34 首次发布

本文链接：https://blog.csdn.net/qq_59625204/article/details/141019209

版权

第一种实现方式：

css设置如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两端对齐示例</title>
<style>
  .name {
    width: 100px;
    text-align: justify;
  }
  .name:after {
    content: '';
    display: inline-block;
    width: 100%; /* 伪元素占满整行，从而触发两端对齐 */
  }
</style>
</head>
<body>
<div class="name">张三</div>
<div class="name">张三丰</div>
</body>
</html>

效果如下：

第二种实现方式：

css设置如下 :

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两端对齐示例</title>
<style>
  .name {
    width: 100px;
    text-align: justify;
    text-align-last: justify;
  }
</style>
</head>
<body>
<div class="name">张三</div>
<div class="name">张三丰</div>
</body>
</html>

效果如下：