将文本区域输入环绕在 div 周围

Question

我有一个文本区域字段，右上角有一个 div 框。我进行了广泛的搜索，但找不到一种方法可以让输入到文本区域的文本环绕 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>

Answer 1

我发现了这个相当古老的讨论： Unusual shape of a textarea?

给出的答案是在div.

上使用contenteditable属性

我设法得到了这段代码，这似乎正是您要找的。

<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>

我只是将 <textarea> 替换为 <div class='textarea' contenteditable='true'>，将 position: absolute; 替换为 float:right;。

将文本区域输入环绕在 div 周围

Wrap textarea input around a div

html

css

textarea