【问题标题】:How to strictly justify text in bootstrap 5如何在引导程序 5 中严格证明文本的合理性
【发布时间】:2021-02-15 08:52:34
【问题描述】:

我想严格证明如下所示的文本。这张照片取自 Libre Office。

天秤座办公室:

网页如下所示:

如何使网页看起来像 Libre 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>

【问题讨论】:

    标签: html css bootstrap-5


    【解决方案1】:

    就这么简单:

    .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>

    【讨论】:

    • class="text-justify" 我实际寻找的代码
    • 在 bootstrap 5.0 中已被弃用
    【解决方案2】:

    添加代码即可实现:

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

    【讨论】:

    • @Raphel 没用。这就是我得到的...i.ibb.co/MkgQYjH/Screenshot-from-2021-02-15-00-41-52.png我按照你说的尝试了。
    • 看起来某些样式已被继承并居中显示您的文本
    • 我尝试了重要但没有用。你能建议一些快速修复吗?
    • 是的,又试了一次 - 请删除 style: text-justify: inter-word;
    • .about { text-align: justify!important;} 试过这个但没用
    猜你喜欢
    • 2021-07-16
    • 1970-01-01
    • 2023-04-09
    • 1970-01-01
    • 2013-10-09
    • 1970-01-01
    • 2014-02-24
    • 2021-12-27
    • 1970-01-01
    相关资源
    最近更新 更多