Languages

CSS flex box conditional wrapping problem

1 points
Asked by:
Greg
1514

I am doing currently comment system for my web page. I have got some problem with my layout.

I whould like to achive folowing effect only with css:

 

CSS - conditional wrapping problem

 

  • When comment is longer than available horizontal space i whould like to put External link to new line - first comment.
  • When comment is short just keel External link in same line - second comment.

Is it possible to do it only using css?

This is my template:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    * {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
        "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
        "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
    
    .comments {
      border-bottom: 1px solid #e3e5e6;
      font-size: 13px;
    }

    .comment {
      padding: 7px;
      border-top: 1px solid #e3e5e6;
    }
    
    .link {
      text-align: right;
      font-size: 12px;
      color: #bfc0bf;
    }
   
  </style>
</head>
<body>
  <div class="comments">
    <div class="comment">
      <div class="text">
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
      </div>
      <div class="link">External link</div>
    </div>
    <div class="comment">
      <div class="text">this is very short comment...</div>
      <div class="link">External link</div>
  	</div>
  </div>
</body>
</html>

 

1 answers
1 points
Answered by:
Greg
1514

Try to use:

  • flex-wrap: wrap; for .comment element
  • flex: auto; for .text element
  • flex: auto; for .link element

 Example solution below:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    * {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
        "Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
        "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
    
    .comments {
      border-bottom: 1px solid #e3e5e6;
      font-size: 13px;
    }

    .comment {
      padding: 7px;
      border-top: 1px solid #e3e5e6;
      display: flex;
      flex-wrap: wrap;
    }
    
    .text {
      flex: auto;
    }
    
    .link {
      text-align: right;
      font-size: 12px;
      color: #bfc0bf;
      flex: auto;
    }
   
  </style>
</head>
<body>
  <div class="comments">
    <div class="comment">
      <div class="text">
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
        this is very long comment has 250 characters?
      </div>
      <div class="link">External link</div>
    </div>
    <div class="comment">
      <div class="text">this is very short comment...</div>
      <div class="link">External link</div>
  	</div>
  </div>
</body>
</html>

 

0 comments Add comment
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join