如何在Bootstrap 5中严格对齐文本

Question

如何在Bootstrap 5中严格对齐文本

htmlcssbootstrap-5

5

我想要严格地将文本如下所示进行对齐。这张图片是从Libra Office中截取的。

Libra Office：

网页看起来像这样：

我如何使网页的格式与Libra Office的格式相同？

我正在使用Bootstrap 5：

.about {
  text-align: right;
  word-wrap: break-word;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
</head>
<div class="container" data-aos="fade-up">
  <div class="about text-justify">
    <header class="section-header">
      <h3>About Nadi Astrology</h3>
      <p>
        These days we hear about people with powers of extra sensory perceptions. (ESP). The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma. They far exceeded the powers of the E.S.P. People. More than that
        are able to know the future by their foresight. With this foresight, Rishies like Kousiha, Agasthiya, Vashishta, Mahasiva Vakkiyar have given predictions for the human being occupying this world. Let us take for instance any particular moment
        of a day. Many lives are born in the world at at any given moment. Human lives, plant life and animals. The Rishies have ignored the last to and confines their predictions only to human our of their wisdom envisaged will come forward to study
        these predictions. The exact age in which watch such person will come for the study has also been foretold by the Rishies.
      </p>
      <p></p>
    </header>
  </div>
</div>

</html>

- Midhun Raj

5个回答

3

你可以通过将其添加到你的CSS / Bootstrap CSS文件中来实现这一点：

.text-justify{text-align:justify !important;}

HTML:

<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

- Shoaib Hussain

3

这在 Bootstrap 5 中有效。在这里找到了解决方案。

<p  style="text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

- Gandhi

1

这与Bootstrap没有任何关系，只是一个CSS而已。虽然它能正常工作。 - Neophyte

2

Bootstrap不支持两端对齐的文本。正如他们所提到的：

请注意，我们不提供用于两端对齐文本的实用类。虽然从美学角度来看，两端对齐的文本可能更吸引人，但它会使字间距更随机，因此更难阅读。

因此，您应该自己定义两端对齐的文本。内联：

<p  style="text-align: justify;">Lorem ipsum</p>

通过CSS类别：

.justify{
  text-align: justify;
  }

<p  class="justify">Lorem ipsum</p>

- Masuod Fathi

0

您可以通过添加代码来实现：

.about { text-align: justify; text-justify: inter-word; }

- Raphael

看起来你的样式被一些额外的样式覆盖了。 - Raphael

让我们在聊天中继续这个讨论。 - Raphael

边距：0; 文本缩进：2rem; Ya Raphael，但这两行使它工作。 - Midhun Raj

这些样式与文本对齐无关。 - Raphael

@ya Raphael ...但我对CSS很陌生...我按照你说的去尝试了，但由于我对CSS知识的缺乏，无法得到所需的输出。不管怎样，非常感谢你的支持Raphael.. - Midhun Raj

显示剩余8条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sergey Sklyar · Accepted Answer

就是这么简单。

.about p {
  margin: 0;
  text-indent: 2rem;
  text-align: justify;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" data-aos="fade-up">
  <div class="about text-justify">
    <header class="section-header">
      <p>These days we hear about people with powers of extra sensory perceptions.  (ESP).  The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma.  They far exceeded the powers of the E.S.P. People.  More than that are able to know the future by their foresight.  With this foresight, Rishies like Kousiha, Agasthiya, Vashishta, Mahasiva Vakkiyar have given predictions for the human being occupying this world.  Let us take for instance any particular moment of a day.  Many lives are born in the world at at any given moment.  Human lives, plant life and animals.  The Rishies have ignored the last to and confines their predictions only to human our of their wisdom envisaged will come forward to study these predictions. The exact age in which watch such person will come for the study has also been foretold by the Rishies.</p>
      <p>These days we hear about people with powers of extra sensory perceptions.  (ESP).  The Rishies were Holy Sages who occupied themselves in concentrating on the one Divine Being Paramathma.  They far exceeded the powers of the E.S.P. People.</p>
    </header>
  </div>
</div>