CODEWITHSUNDEEP
cssflexbox
Malami
Malami

Reputation: 13

flex column and wrap will let flex-item overflow

A simple layout that I want to achieve with minimal html tags

Only <img> & <h1> & <p> and no other extra tags

flex + column + wrap

The first column has only one image

The second column contains the title and crossword

The width and height of the parent layer are fixed

The result is that part of the text will overflow

Only add width to <p> to prevent

Is there any way to automatically break text without adding width?

HTML

*{
      margin: 0;
      padding: 0;
    }
    .out{
      width: 600px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 50px auto;
      font-family: Verdana;

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }
    img{
      /* margin-bottom: 20px; */
      margin-right: 20px;
    }
    p{
      line-height: 1.6;
      overflow-wrap: break-word;
    }
<div class="out">
    <img src="https://picsum.photos/id/230/200/200" alt="">
    <h1>This is Title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>

Upvotes: 1

Views: 232

Answers (2)

Nexo
Nexo

Reputation: 2331

Another solution as per your expecation:

* {
  margin: 0;
  padding: 0;
}

.out {
  width: 600px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 50px auto;
  font-family: Verdana;
  display: flex;
}

img {
  /* margin-bottom: 20px; */
  margin-right: 20px;
}

p {
  line-height: 1.6;
  overflow-wrap: break-word;
  margin-left: -200px;
  margin-top: auto;
  margin-bottom: auto;
}

h1 {
  position: relative;
  white-space: nowrap;
}

p::before {
  content: "";
  width: 100%;
}
<div class="out">
  <img src="https://picsum.photos/id/230/200/200" alt="">
  <h1>This is Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>

Upvotes: 1

Nexo
Nexo

Reputation: 2331

Here is my solution

* {
  font-family: 'poppins';
}

.card {
  display: flex;
  padding: 15px;
  border: 1px solid #8f8f8f;
}

.content {
  margin-left: 10px;
}

.content h6 {
  margin-top: 0;
  font-size: 32px;
  margin-bottom: 5px;
}
<div class="card">
  <img src="//via.placeholder.com/150">
  <div class="content">
    <h6>This is title</h6>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English.</p>
  </div>
</div>

Upvotes: 0

Related Questions