Question 248269 in CSS Question posted in
Some basic documentation can be found here.

CSS text-align: justify not working for span/strong

I have a problem with css. This is my HTML code

<p><strong>Loremipsumdolorsitg, consetetur sadipscing: </strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>

p {
 text-align: justify;
 hyphens: auto;
}

But it seems so:

enter image description here

It works in p perfect. Text had full width with hyphens but not in strong. Space in between words ist to big. How can i fix it?

I did test it with

display: inline and text-align: justify; for strong but it also doesnt work

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finaly i used &shy; for manual breaks. It seems that these strong-tags are poorly defined where words are hyphenated.


  2. 0

    text-align: justify; will justify the words automatically (left, center, right) for the first line as it cannot fit within the available width, hence why you are seeing the gaps in your text. Then it believes it has done it’s job and the rest of the paragraph is as normal.

    Removing the text-align: justify; and just keeping the hyphens: auto; will still apply hyphens to the title, and if you are wanting to break to a new line between the title and the main paragraph you could simply add a <br> tag immediately after the </strong>.

    So something like:

    <p><strong>Loremipsumdolorsitg, consetetur sadipscing: </strong><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>

    If you are certain you require some kind of text aligning, you could alter text-align: justify; to text-align: left;

    If however you are wanting the title to exclude hiphens, but you would like the rest of the text to have hiphens, and be inline, then you need to break your title out of the paragraph like this:

    <strong>title</strong><p>rest of paragraph</p>

    and in your CSS:

    p {
 text-align: left;
 hyphens: auto;
 display: inline;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search