All geek questions in one place

Wrap the text box around the div

I have a textarea field with a block divin the upper right corner. I searched everywhere but cannot find a way for the text entered in the text area to wrap around this div.

#wrapper {
  position: relative;
  width: 500px;
  height: 500px;
}

#logo {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 10px;
  background-color: cyan;
}

textarea {
  width: 100%;
  height: 100%;
}
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="wrapper">
    <div id="logo">LOGO</div>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam acumsan fringila lacus, in rhoncus ligula pretium eu. Nulam blandit vel quam ut posuere. Sed tincidunt comodo lacinia. Vivamus eget ulamcorper sapien. Phaselus gravida pretium sem, non fringila orci luctus vel. Donec augue sapien, pharetra portitor fringila hendrerit, ultrices in telus. In aliquet laoret turpis vitae ultrices. Praesent eget nula et telus pelentesque suscipit ac eu est. Nula sed imperdiet dui. Donec eficitur est dolor, nec placerat ex posuere pretium.</textarea>
  </div>
</body>

</html>
Run codeHide result
+4
source share
1 answer

I found this rather ancient discussion: an unusual form of a text area?

The answer that is given is to use the property contenteditablein div.

I manage to get this code, which seems to be what you are looking for.

<html>

<head>
  <title></title>
  <meta charset="utf-8" />

  <style>
    #wrapper {
      width: 500px;
      height: 500px;
    }
    
    #logo {
      width: 100px;
      height: 100px;
      float: right;
      background-color: cyan;
    }
    
    .textarea {
      width: 100%;
      height: 100%;
    }
    
    <html><head><title></title><meta charset="utf-8" /><style>#wrapper {
      width: 500px;
      height: 500px;
    }
    
    #logo {
      width: 100px;
      height: 100px;
      float: right;
      background-color: cyan;
    }
    
    .textarea {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="logo">LOGO</div>
    <div class='textarea' contenteditable='true'>HTML</div>
  </div>
</body>

</html>

</style>
</head>

<body>
  <div id="wrapper">
    <div id="logo">LOGO</div>
    <div class='textarea' contenteditable='true'>HTML</div>
  </div>
</body>

</html>
Run codeHide result

I just replace <textarea>with <div class='textarea' contenteditable='true'>and position: absolute;with float:right;,

+2
source

Source: https://habr.com/ru/post/1672941/

More articles:


All Articles