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?

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?

Hi, Kilian Hekhuis

CSS is present, but still align left



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

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.

Solution

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.

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!