How can I wrap element content to the next line, starting from the first of its container using flex or other CSS properties?

78 Views Asked by Fateme M At 01 July 2023 at 11:52

i want to wrap the content of an element to the next line and it should start from the first of its container.

i need something like this picture. is it possible to achieve this with flex ?? how about other CSS properties ?

<html>
  <style>
    .container {display: flex}
    .item1 {color: red}
    .item2 {float: left}
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should beark to the next lineeeee. </div>
    </div>
  </body>
</html>

Original Q&A

There are 2 best solutions below

kzi On 01 July 2023 at 13:17 BEST ANSWER

Try this:

<html>
  <style>
    .container {width: 20vw;}
    .item1 {color: red; float: left}
  </style>
  <body>
    <div class="container">
      <span class="item1"> hi</span>
      <span class="item2"> hello this is a long line that should beark to the next lineeeee. </span>
    </div>
  </body>
</html>

I added width: 20vw only to the container to show that it works. Without that, the content would not be long enough to break.

Saif Mohamed On 01 July 2023 at 12:09

Try CSS property called float:right, I think this will give you the result you want. https://www.w3schools.com/css/css_float.asp

How can I wrap element content to the next line, starting from the first of its container using flex or other CSS properties?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in FLEXBOX

Related Questions in FLEX4

Trending Questions

Popular # Hahtags

Popular Questions