文本框中的长行文本会使光标下降到中间边缘，我似乎无法修复这个问题。

**[Fiddle Diddle][1]**

#wrap { overflow: hidden; } #inner { height: 350px; width: 500px; border: 1px solid blue; } #textContent { word-wrap: break-word; word-break: break-all; white-space: pre-line; } #left, #right { height: 50%; width: 25%; margin-top: -1px; padding: 0; border: 1px solid blue; border-top-color: white; margin-bottom: 5px; } #right { margin-left: 5px; float: right; margin-right: -1px; border-right-color: white; } #left { margin-right: 5px; float: left; margin-left: -1px; border-left-color: white; } <div id="wrap"> <div id="inner"> <div id="left"></div> <div id="right"></div> <span id="textContent" contenteditable>The A B Cs</span> </div> </div>

[1]: http://jsfiddle.net/yKSZV/

你可以使用一个contentteditable div，带有两个角div:

<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
  <div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
  <div style="float:right; width:50px; height: 50px;  border: 1px solid blue" contenteditable="false"></div>
  hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。

更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。

由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示

小提琴演示> >

这是不可能的，陛下!文本区域通常是一个矩形或方形框，您可以在其中输入。

然而，要做出这样的东西，你可以使用2个文本区域，然后给他们一个指定的宽度和高度。否则我不认为它会发生!

第二种方法是创建一个可编辑元素。

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

代码是:

<div contenteditable="true">
   This text can be edited by the user.
</div>

使用这个，你可以使任何元素可编辑!你可以给它一个维度，它会起作用的!你会得到它只是一个文本区域。

参考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

如果你把CSS形状和contentteditable结合起来，这可以在webkit浏览器中完成。

首先你必须启用标志:enable-experimental-web-platform-features

然后重新启动您的webkit浏览器，然后检查这小提琴!

这种方法也适用于非标准形状。

标记

 <div class="shape" contenteditable="true">
    <p>
     Text here
    </p>
  </div>

CSS

.shape{
  -webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  width: 400px;
  height: 400px;
  text-align: justify;
  margin: 0 auto;
}

那么我到底是怎么得到这个多边形的呢?

去这个网站，让你自己的自定义形状!

关于启用标志的注意事项: (从这儿)

要启用形状、区域和混合模式: 复制粘贴 //flags/#enable-experimental-web-platform-features 地址栏，然后按enter。点击其中的“Enable”链接 部分。 点击浏览器底部的“重新启动”按钮 窗口。

也许这是可能的内容编辑?

它不是一个文本区域，但如果你成功地用这个形状创建了一个div，它就可以工作。

我认为这是不可能的只有textarea…

一个小例子:http://jsfiddle.net/qgfP6/5/

<div contenteditable="true">
</div>