Question 198290 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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>

enter image description here

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search