Text overflow in a block element-CodePudding

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 >
    <div >
      <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>

CodePudding user response：

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 >
    <div >
      <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>

CodePudding user response：

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;
}

CodePudding user response：

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 >
            <div >
        <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>