Html Question posted in
Some basic documentation can be found here.

Html – Overflow wrap does not adjust text width

I want the text div to be centered but the text to be aligned left.

The inner div (#introduction-child) is wider than its content. Instead it should be the width of the text (max-width 80vw).

The font-size seems to be changing the font size without changing its containers width.

Any idea how I can make it fit to content without using px/pt?

#introduction {
  display: flex;
  justify-content: center;
  background-color: grey;
  height: 100vh;
  width: 100vw;
}

#introduction-child {
  overflow-wrap: break-word;
  max-width: 80vw;
  background-color: #80b0ff;
  margin-top: 28vh;
}

#introduction h2 {
  font-size: 1.8em;
  /* ??*/
}
<div id="introduction">
  <div id="introduction-child">
    <h2>Max Mustermann</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
    <h2>Lorem amet, consectetur ad</h2>
  </div>
</div>

This is what it is supposed to be like

Tags:

3

Answers


  1. 0

    I want the text div to be centered but the text to be aligned left.

    This is exactly what happens in your snippet. No problem.

    The inner div (#introduction-child) is wider than its content. Instead
    it should be the width of the text (max-width 80vw).

    No, your snippet shows that the the inner div is the same width as the text. No problem.

    The font-size seems to be changing the font size without changing its
    containers width.

    I do not understand what you mean, and the font-size does not appear to change.

    Login or Signup to reply.
  2. 0

    give the min height and width to max to outer wrapper and then gave width as fit-content to the children with max height and width

    this is my version of the answer and hope this works 🙂

    #introduction {
          display: flex;
          justify-content: center;
          background-color: grey;
          min-height: 100vh;
          min-width: 100vw;
        }

        #introduction-child {
          overflow-wrap: break-word;
          width: fit-content;
          max-width: 80%;
          max-height: 80%;
          background-color: #80b0ff;
          margin-top: 20vh;
        }

        #introduction h2 {
          font-size: 1.8em;
        }
          
<div id="introduction">
  <div id="introduction-child">
    <h2>Max Mustermann</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
    <h2>Lorem amet, consectetur ad</h2>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    to solve this problem please use align-item:center instead of justify-content: center;

    #introduction {
  display: flex;
  justify-content: center;
  align-items: center; /* This vertically centers the content */
  background-color: grey;
  height: 100vh;
  width: 100vw;
}

#introduction-child {
  display: inline-block; /* Allows the width to fit the content */
  overflow-wrap: break-word;
  max-width: 80vw; /* Constrains the maximum width */
  background-color: #80b0ff;
  text-align: left; /* Ensures text is left-aligned */
  margin-top: 28vh;
}

#introduction h2 {
  font-size: 1.8em; /* Font size scaling */
  margin: 0; /* Removes default margin if needed */
}
    <div id="introduction">
  <div id="introduction-child">
    <h2>Max Mustermann</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
    <h2>Lorem amet, consectetur ad</h2>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search