'Is there any CSS tag to justify content (like in word)? [closed]

I want National and International brands to be placed in the center under the above present text.

OutPut:

enter image description here

The CSS code-

.ans{
    padding-top: 1.2vh;
    display:flex;
    color:lightsalmon;
    font-size: 5vh;
    text-justify: auto;

}

The HTML Code-

<div id="qa">
    <p class="q">
        Why HOTPICKS?
    </p>
    <p class="ans">
        HOTPICKS provides a discount of Upto 75% on National and International Brands. 
    </p>
</div>
javascripthtmlcssweb


Solution 1:[1]

NOTE: avoiding text-align-last: center; due low support. (https://caniuse.com/css-text-align-last)

The problem is how to center a specific line of a text or how to wrap exactly. If it's critical what I'd probably do while researching a solution would be wrap the line in a span tag with display: block but remove this display: block in low resolutions (using @media queries).

See the next snippet (without the @media to see a break problem in low res)

.ans{
    padding-top: 1.2vh;
    color:lightsalmon;
    font-size: 5vh;
    text-align: center;
}

.ans span {
    display: block;
}

.q {
    text-align: center;
}
<div id="qa">
    <p class="q">
        Why HOTPICKS?
    </p>
    <p class="ans">
        HOTPICKS provides a discount of Upto 75% on 
        <span>National and International Brands.</span>
    </p>
</div>

This works but the break could be weird with little width resolution, that's why I recommend disable on mobile.

This means modify html but I prefer that to superhacky css weird tricks using margins. Matter of personal preferences.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions