857
Views
6
Comments
Solved
text-align: justify?
Question

Hi, everyone.

I can't set text widget align to justify. What I tried

  1. Set in Styles -> Style Properties Applied to "text-align: justify;"
  2. Properties -> Style Classes
    1. Style Sheet Editor add ".text-align-justify {text-align: justify;}"
    2. Properties -> Style Classes value to "text-align-justify"

But text still have default align left. What am I doing wrong?

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

Hi Aliaksandr,

It seems the text-align is applied to the Web Block directly. However, Web Blocks are encapsulated in a <span>, which is an in-line element, and has the width of the elements it encloses. Therefore, setting a text-align to a <span> doesn't do what you perhaps expect. You need to apply the text-align either to the enclosing <div> (Container) or to a Container that's inside the Web Block.

2019-10-30 14-18-23
Aliaksandr Kasko

Kilian Hekhuis,

Oh, thanks a lot. I added custom style like in point 2 of my start post and applied it to enclosing container and I've got what I want.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Aliaksandr,

Did you check with the development tools of your browser (e.g. F12 in Chrome) what happened with the CSS? Was it overridden? Is it present at all?

2019-10-30 14-18-23
Aliaksandr Kasko

Hi, Kilian Hekhuis

CSS is present, but still align left



2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi Aliaksandr,

With text-align: justify text will always still be aligned along the left on the spacing of the text given the width will be such that words are spread over the width to also have the text right-aligned.

https://www.w3schools.com/cssref/css3_pr_text-justify.asp

Regards,

Daniel

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

Hi Aliaksandr,

It seems the text-align is applied to the Web Block directly. However, Web Blocks are encapsulated in a <span>, which is an in-line element, and has the width of the elements it encloses. Therefore, setting a text-align to a <span> doesn't do what you perhaps expect. You need to apply the text-align either to the enclosing <div> (Container) or to a Container that's inside the Web Block.

2019-10-30 14-18-23
Aliaksandr Kasko

Kilian Hekhuis,

Oh, thanks a lot. I added custom style like in point 2 of my start post and applied it to enclosing container and I've got what I want.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Yes, that's what I meant. Great you got it solved. If you're really thankful, please mark my post above as the Solution, instead of your own ;). Happy coding!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.