如何使完美排列的文本始终位于行尾？

Question

我正在尝试创建一个列，其中的文本完全适合行尾，但我似乎无法让它工作。我也试过搜索它，但没有找到解决这个问题的方法。

我需要文本在专栏末尾结束，就像这个网页一样：

https://www.realitnitrznice.cz/blog/4

我试图通过设置最大宽度来实现这种效果：

.article-maxwidth{
  max-width: 40vw;
}

但这非常不准确。例如，我也尝试过设置 w-75，这再次显示出非常不准确。我注意到该网页以某种方式设置了空格。如果文本不够长，页面将填充更大的空间，以某种方式将文本推到列的末尾。

这是我正在尝试排列的当前代码：

<div class="wrapper container-fluid shorter">
        <div class="blog-body article-maxwidth">

            <h5 class="main-title">Jak postavit dům levně aneb proč jsou typové domy tak levné</h5>
            <p class="author"><i class="fas fa-pen-fancy"></i> Realitní tržnice</p>

            <p>Velmi často, když s někým řeším cenu stavby dochází na druhé straně k zděšení, jak je možné, že domy co navrhujeme jsou tak drahé. Ano všichni jsou často nadopovaní marketingovými steroidy, které na ně firmy prodávající typové projekty nebo typové domy chrlí.</p>

            <div class="image">
                <a href="images/5.jpg" data-rel="lightcase">
                    <img src="images/5.jpg" alt="Exotická kuchyně">
                </a>
                <span class="title">Exotická kuchyně</span>
            </div>

            <h2>Dlouhá cesta do ráje</h2>
            <p>Letiště v Bangkoku je krokem z komfortní zóny pro všechny, kdo se bojí sednout do letadla. Let do vysněného ráje trvá kolem 12 hodin s minimálně jedním přestupem v některé z evropských metropolí.    O přímé lince z Prahy do Bangkoku se    zatím pouze mluví, ale zdá se, že bychom se jí mohli v dohledné dočkat. Aby byla trasa pro letecké společnosti zajímavá z finančního hlediska, je nutné, aby ji využilo alespoň 30 000 cestujících    ročně, a to naše republika s přehledem    splňuje.</p>

            <div class="image">
                <a href="images/2.jpg" data-rel="lightcase">
                    <img src="images/2.jpg" alt="Thajské pláže">
                </a>
                <span class="title">Thajské pláže</span>
            </div>

            <h2>Svobodně dýchejte</h2>
            <p>Kdysi se tahle země jmenovala Siam, což v překladu znamená „svoboda“. A svobodně se tu budete cítit i dnes. Své si tu najde milovník pulsujících velkoměst, který zaplesá nad svítícím a rušným    Bangkokem, ale i obdivovatelé panenské    přírody, národních parků s pralesy a vodopády nebo sněhobílých pláží. A až se unavíte sledováním okolních krás, pohodlně se usaďte a nechte si naservírovat cokoliv ze zdejší kuchyně. Vyhlášená je    po celém světě, ale můžeme vám    zaručit, že takové dobroty jako tady mimo území Thajska neochutnáte.</p>

            <!--<div class="image"><a href="blog/4/3.jpg" data-rel="lightcase"><img src="blog/4/6.jpg" alt="Taxi"></a></div>  <span class="title">Taxi</span> -->

            <h2>Kde složit hlavu</h2>
            <p>Zvlášť v hlavní sezóně, která trvá od listopadu do března, je radno domluvit si ubytování předem. Jestli toužíte po komfortu a hýčkání, zaměřte se na čtyřhvězdičkové rezorty. Za noc v nich    zaplatíte řádově méně než u nás a můžete se    spolehnout, že servis bude perfektní. Ubytování dokážete najít i na místě, ale obrňte se trpělivostí.</p>

            <div class="image">
                <a href="images/4.jpg" data-rel="lightcase">
                    <img src="images/4.jpg" alt="Noční ulice">
                </a>
                <span class="title">Noční ulice</span>
            </div>

            <h2>Vzpomínky na celý život</h2>
            <p>Ať zvolíte jakýkoliv typ svého pobytu v Thajsku, můžete se spolehnout, že vás ve všech ohledech nadchne. Výstražný prst bychom zvedli jen v jednom případě, a to jsou drogy. Jejich držení a    užívání je trestné a cizinci bývají snadným    terčem jak drogové mafie, tak policie.</p>

        </div>
</div>

有没有人碰巧知道我怎样才能做到这一点？有没有深入解释这个问题的文档？感谢您的任何建议。

Answer 1

您可以添加 text-align: justify 使文本在

处中断

.article {
  display: block;
  width: 40%;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  color: black;
  text-align: justify;
}

<div class="article">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil molestiae voluptatum sunt nostrum eos maxime in temporibus accusamus, a vero laudantium sapiente? Officiis minima animi magnam sequi recusandae reiciendis libero!</p>
</div>

如何使完美排列的文本始终位于行尾？

How do I make perfectly lined text to always fir the end of the line?

html

css

less

bootstrap-4