如何在 bootstrap 5 中严格对齐文本
How to strictly justify text in bootstrap 5
我想严格对齐文本,如下所示。本图取自Libre Office
Libra 办公室:
网页看起来像这样:
如何使网页看起来像 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>
添加代码即可实现:
.about { text-align: justify; text-justify: inter-word; }
就这么简单:
.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>
我想严格对齐文本,如下所示。本图取自Libre Office
Libra 办公室:
网页看起来像这样:
如何使网页看起来像 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>
添加代码即可实现:
.about { text-align: justify; text-justify: inter-word; }
就这么简单:
.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>