在图像周围包裹textarea文本

时间:2017-11-05 03:45:25

标签: html css flexbox

我左边有一个文本框(比如说)一个对话框,左边有一个图像。文本框和图像都垂直地从同一点开始,但是说文本比图像长得多。

一旦文本在图像下方(垂直),我希望文本在对话框中一直展开。这是通过使用CSS / JS吗?

请注意,我必须使用文本框,因为文本是可编辑的。如果它有帮助,我正在开发一个AngularJS应用程序,并且通常使用flexbox进行布局。

1 个答案:

答案 0 :(得分:2)

不是textarea,但您可以使用a contenteditable div执行此类操作。

<img style="float: right;" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" />
<div contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo diam, suscipit sit amet est sed, tempus tristique ex. Nulla ultrices eu odio sit amet sollicitudin. Vivamus condimentum fermentum mattis. Nunc fringilla quam id leo suscipit, nec laoreet dolor ultrices. Nulla scelerisque augue non odio vestibulum, a luctus tellus aliquet. Curabitur eget ipsum ornare, rutrum libero vel, euismod eros. Vivamus tincidunt commodo orci, sed sodales ligula convallis quis. In erat quam, mollis vel rhoncus dapibus, pharetra at nunc. Nunc eget mi et ipsum scelerisque lobortis. Curabitur malesuada quam at varius tempus. Nulla in imperdiet augue. Praesent ultricies libero urna, vitae eleifend dui mattis ac. Etiam pellentesque sodales dui in scelerisque. Sed sed felis elit.</p>

<p>Ut euismod nibh ac sagittis convallis. Curabitur tempor tortor neque, vel accumsan ex malesuada quis. Phasellus id metus condimentum, varius lacus ac, tincidunt leo. Maecenas tincidunt nibh eu nulla aliquet elementum. Donec varius sem aliquam nunc egestas dictum. Curabitur risus leo, semper et diam ut, consectetur congue purus. Proin porttitor sed diam sit amet volutpat. Aliquam lacinia, nibh vitae finibus blandit, dolor ligula ornare magna, ac dignissim arcu odio eget sapien. Sed dictum condimentum posuere.</p>

<p>Cras auctor dolor eu arcu hendrerit, sit amet interdum magna malesuada. Pellentesque at porta mi. Donec fermentum finibus porttitor. Mauris at eros accumsan, tincidunt mauris in, scelerisque sem. Quisque tortor metus, ullamcorper vel mauris ac, pharetra dictum orci. Suspendisse non ullamcorper magna, ac scelerisque velit. Maecenas ut nunc et nunc ultrices tempor. Donec leo felis, vulputate suscipit viverra sed, scelerisque eu tellus. Aenean rhoncus odio nibh. Aliquam ac tellus orci. Vivamus tortor mi, tincidunt quis tortor a, sagittis aliquet felis. Mauris ac mattis mauris, in dictum sapien. Curabitur dignissim ex luctus ex semper consequat. Proin sed quam et massa venenatis fringilla nec eget dolor. Pellentesque eu tellus sodales, faucibus lorem eu, faucibus nulla. Nam eu nulla laoreet, malesuada nulla eget, posuere nisi.</p>

<p>Ut fermentum, magna vitae fringilla elementum, est eros varius metus, nec hendrerit libero mi non est. Quisque vel malesuada ipsum. Aenean venenatis lorem sit amet urna molestie efficitur. Integer ut mi a urna fermentum lacinia at ac lorem. Praesent pellentesque est sed diam interdum viverra. Pellentesque lobortis ipsum congue, vehicula mi at, rutrum turpis. Maecenas sapien arcu, aliquet nec vehicula nec, gravida eget leo. Vestibulum magna est, ultricies at sem sit amet, egestas fermentum dui. Quisque gravida in orci eget ullamcorper. Nunc in lectus ac elit dapibus pulvinar. Morbi diam orci, vulputate eget luctus at, mattis eu nisi. Aenean sit amet lorem a quam placerat consequat. Cras varius tortor sit amet libero posuere maximus.</p>

<p>Integer posuere ligula sapien, id iaculis odio accumsan in. Phasellus molestie quam quis fringilla mattis. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fermentum urna et urna vestibulum faucibus. Pellentesque mauris quam, faucibus et porta et, mollis viverra mauris. Praesent consectetur orci purus, sed sagittis ligula sagittis quis. Integer lacinia ut libero quis feugiat. In ac arcu ac tellus tincidunt egestas lacinia nec neque. Suspendisse viverra velit massa, porta tincidunt nibh finibus vel. Maecenas fermentum nec massa quis tristique. Vivamus ut efficitur elit. Donec tempus, augue congue feugiat luctus, ante metus hendrerit risus, mollis vehicula tortor dolor id odio.</p>
</div>

请注意,内容可编辑元素比简单textarea更复杂,并允许格式化并使用下面的HTML。