Text overflow in a block element

Question

My problem is I want create code in html/CSS which adjust automatically the website (blocks+content) whenever I minimize the browser window. e.g. I've got the problem of text overflow in the block which I created, when I minimize the browser window.

I want the block element to adjust to the length of my content.

Problem There is a text overflow in the block element, which I marked as a green block with a solid border style.

I tried Sure I can solve it with overflow: auto; but it's an ugly solution.

I want The block to adjust itself to the length of the text and vice versa

.p1 {
  background-color: green;
  border-style: solid;
  float: left;
  width: auto;
  height: 100px;
}

.block {
  display: block;
  width: 180px;
}

<header>
  <h1>Title</h1>
  <nav></nav>
</header>
<main>
  <article class="p1">
    <div class="block">
      <h4>Paragraph I</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
      </p>
    </div>
  </article>
</main>
<footer></footer>

18jad · Answer 1 · 2022-11-09T18:36:12.980

0

Don't give a static height, otherwise it will ignore the content height, and width fit-content will make sure to take the width of your content:

.p1 {
  background-color: green;
  border-style: solid;
  float: left;
  width: fit-content;
}

edited Nov 09 '22 at 18:36

answered Nov 09 '22 at 18:30

18jad

413
3
8

yes i realized it now and changed it to auto. thanks – Tultara Tulafan Nov 09 '22 at 18:50

score 0 · Accepted Answer · answered Nov 09 '22 at 18:46

I'm not 100% sure if you want the width of the green block to fit the browser window or the height but... Block level elements like <article> or <div> will occupy the full screen width and automatically adjust their height to the content so the easiest thing to do is just don't define those properties in your CSS

Marked up changes are below. If it's not exactly what you're looking to achieve let me know in the comments and I'll tweak.

Good luck on your journey into CSS

.p1 {
  background-color: green;
  border-style: solid;
  /* float: left; <--- if you're looking to make this block fit the width of the chile elements then it's better to use width: fit-content;  */
  width: fit-content;
  /* width: auto; <--- you don't need this because the default is 'auto' */
  /* height: 100px; <-- take this out and the height of your block will be set to the height of the content */
}

.block {
  /* display: block; <--- you don't need this as a div is, by default, a block element */
  width: 180px;
}

<header>
  <h1>Title</h1>
  <nav></nav>
</header>
<main>
  <article class="p1">
    <div class="block">
      <h4>Paragraph I</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
      </p>
    </div>
  </article>
</main>
<footer></footer>

thank you adam. thats exactly what i wanted to achiev! . in the next step it would be cool, if the block dosent change !but the size of the text within the block adjust itself to the size of the block. — Tultara Tulafan, Nov 09 '22 at 18:55

Tultara Tulafan · Answer 3 · 2022-11-09T19:07:13.643

I got the solution guys yeee (which most of you probaly already know ) but maybe you ve a cleaner solution

.block {
    background-color: green;
    border-style: solid;
    float:left;
    width: fit-content;
    display: flex;
    margin-left: 100px;
    margin-right: 100px;

  }

  .p1 {
    display: flex;
  }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="descrption" content="Übung zu Aufgabe 17.6">
    <meta name="keywords" content="ansprechend, hintergrund, html, css">
    <link rel="stylesheet" href="style.css">
    <title>Iran</title>
</head>
<body>
    <header>
        <nav></nav>
        <h1>Title</h1>
    </header>
    <main>
        <article class="block">
            <div class="p1">
        <h4>Paragraph I</h4>
        <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
        sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
        nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
        aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
        </p></div></article>
    </main>
    <footer></footer>
</body>
</html>

Have a read here https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ Glad you sorted it. Great work! — Adam, Nov 09 '22 at 18:58
thank you adam! in the next step it would be cool, if the block dosent change !but the size of the text within the block adjust itself to the size of the block — Tultara Tulafan, Nov 09 '22 at 19:03
Do you mean changing the text height to fit the block? This can be done here https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Adam, Nov 09 '22 at 19:05
dude you are faster then every search machine. thanks so far and i hope i can also be helpful in the future! — Tultara Tulafan, Nov 09 '22 at 19:08

Text overflow in a block element

3 Answers3