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

Html – Make width of container equals maximal width of text

I have container with fixed width. Inside the container there is a div with internal text.
Example:
enter image description here

div.link element has width equals 100% of parent container, but I want, that element will has width equals maximal width of text (see example below).
enter image description here

HTML:

<div id="app">
  <div class="container">
    <div class="links-container">
      <div class="link">With built in wardrobes</div>
    </div>
  </div>
</div>

CSS:

#app {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  background-color: gray;
}

.container {
  width: 200px;
  height: 500px;
  background-color: rgba(180, 0, 200, 0.3);
  display: flex;
  justify-content: center;
}

.links-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  row-gap: 20px;
  max-width: 100%;
}

.link {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  border-bottom: 2px dashed;
}

I’m trying different solutions with inline-block and max-width, but the desired result could not be achieved

Tags:

2

Answers


  1. 0

    Since your problem seems to be related to a title, I’d recommend tweaking with the CSS width values for the specific div. For example, instead of just using the links-container div tag as a container for text, open a text tag inside of the links-container div tag, and then edit the text tag’s width in CSS until you get your desired width.

    I personally use this technique all the time, and it’s very beginner friendly.

    Login or Signup to reply.
  2. 0

    From what I understood, you want the text to not wrap (correct me if I’m wrong).
    Your text currently get wrapped because you have set a fixed width to the container, thus the text tries to fit to it’s container (200px).

    If you will remove the fixed width:

    .container {
  width: 200px; /* <- delete this line */
  height: 500px;
  background-color: rgba(180, 0, 200, 0.3);
  display: flex;
  justify-content: center;
}

    the text won’t wrap, and the containers’ width will be the same as the longest text (.link).

    the container

    👆 this is how your page looks without the fixed width.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search