0
308
ViewsIs there any CSS tag to justify content (like in word)?
I want National and International brands to be placed in the center under the above present text.
OutPut:
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>
1 answers
Answer question0
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.