Product Page Project - Javascript and CSS

Community feedback

• 

  P

  Huy Phan•3,430

  @huyphan2210

  Posted 5 months ago

  Hi, @Crystalis89,

  I've seen your solution and your question. Here's a possible answer:

  You're using text-wrap: balance on your headings.

  The text-wrap: balance property in CSS is a feature that aims to improve the visual appearance of text wrapping, particularly for multiline text. Here's how it differs from the default text-wrap behavior:

  Default text-wrap Behavior

  • When text-wrap is not explicitly set (or set to its default), the browser uses its standard text-wrapping rules.
  • Text wraps at the nearest breaking point within the container (e.g., spaces, hyphens) to ensure the text fits within the width of the container.
  • The lines of text may end up uneven in length, with some lines being much longer or shorter than others.

  text-wrap: balance Behavior

  • Introduced to address the aesthetic concerns of text wrapping, particularly for multiline text like headings, captions, or callouts.
  • Balances the line lengths by distributing text more evenly across lines, creating a more visually appealing block of text.
  • Works by calculating optimal breaking points to minimize the difference in length between the lines.

  Example for Comparison

  Default Wrapping:

  h1 {
    text-wrap: normal; /* Default behavior */
  }
  

  Result:

  A long heading with
  unbalanced wrapping
  

  Balanced Wrapping:

  h1 {
    text-wrap: balance;
  }
  

  Result:

  A long heading
  with balanced
  wrapping
  

  In conclusion, if you don't want your h1 to be wrapped like you described, just overwrite the text-wrap: balance attribute with text-wrap: normal. It should work like you'd like it to.

  Hope this helps!

  01

  Marked as helpful