Question

我试图让最后一行文字设置为text-align: justify;

我的HTML看起来像这样：

<body>
<div class="container">
    <div id="textbox">Some Text goes here<br><a href=link></a>
    </div>
</div>
</body>

我的CSS：

#textbox {
    text-align: center;
    text-align-last: justify;
}

<br>导致倒数第二行被对齐，并且最后一行的链接也是合理的。问题是我不希望倒数第二行是合理的。我只希望最后一行是合理的。

我尝试将以下内容添加到我的CSS中：

a {
   text-align: justify;
}

从#textbox中删除text-align-last: justify;，但我没有运气。

关于如何实现这一目标的任何建议？

Answer 1

由于a标记是内联标记，因此您应将a标记包装到块标记中，例如p标记，然后应用对齐css样式。

如果您必须单独使用标签，以下是一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #textbox {
      -ms-text-align-last: center;
      -moz-text-align-last: center;
      text-align-last: center;
    }
    
    a {
      display: block;
      -ms-text-align-last: justify;
      -moz-text-align-last: justify;
      text-align-last: justify;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="textbox">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sed magni nesciunt pariatur recusandae quam. Suscipit dolorum, labore exercitationem natus!
      <br>
      <a href="#">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nulla autem perferendis enim deleniti magnam incidunt, maxime praesentium amet officiis.
            </a>
    </div>
  </div>
</body>

</html>

PS：你不应该使用br标签，而应该在语义上使用html，你可以使用这样的块标签作为p标签来包装行。

关于text-align-last，请参阅css-tricks text-align-last

希望它可以帮到你。

Answer 2

您可以将此CSS分配给a代码：

#textbox > a {
  display: block;
  text-align-last: justify;
}

无论您的链接内容是什么（您没有指定），为了证明它的合理性，您首先需要将其作为块元素。然后你可以证明其内容的合理性。

＆＃13;

#textbox > a {
  display: block;
  text-align-last: justify;
}

＆＃13;

<body>
  <div class="container">
    <div id="textbox">Some Text goes here<br><a href=link>What is supposed to be here?</a>
    </div>
  </div>
</body>

＆＃13;

当有礼物时，我怎样才能将我的div的最后一行文本对齐？

2 个答案: