小开

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

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

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

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/ < a href = " 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

小开

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

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

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

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

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

小开

你可以使用一个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 and CSS创建复杂的形状。

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

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

FIDDLE DEMO>>

小开

最佳答案

简介

首先，在其他文章中提出了许多解决方案。我认为这是目前(2013年)可以与最多数量的浏览器兼容的一个，因为它不需要任何CSS3属性。但是，该方法在不支持的浏览器 contentdeditable上无效，请小心。

用div `contenteditable`解决

正如@Getz所提议的，你可以使用带有contenteditable的div，然后在它上面用一些div来塑造它。下面是一个例子，有两个块浮动在主div的左上方和右上方:

Firefox 28的结果

正如你所看到的，如果你想要和你在文章中要求的相同的结果，你必须稍微调整一下边界。主div的每一面都有蓝色边框。接下来，必须粘贴红色块来隐藏主div的顶部边界，并且只需要在特定的方面对它们应用边界(右块为左下角，左块为底部和右侧)。

之后，你可以通过Javascript获取内容，例如当“提交”按钮被触发时。而且我认为你也可以处理CSS的其余部分(font-size， color等):)

完整的代码示例

.block_left {
background-color: red;
height: 70px;
width: 100px;
float: left;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
}


.block_right {
background-color: red;
height: 70px;
width: 100px;
float: right;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
}


.div2 {
background-color: white;
font-size: 1.5em;
border: 2px solid blue;
}


.parent {
height: 300px;
width: 500px;
}

<div class="parent">
<div class="block_left"></div>
<div class="block_right"></div>
<div class="div2" contenteditable="true">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
</div>
</div>

小开

如果你结合CSS的形状和contenteditable，这可以在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;
}

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

去这个网站并创建自己的自定义形状!

启用标志的说明: (从在这里) < / p >

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

小开

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

**[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/

小开

在不久的将来，我们可以使用所谓的css-shapes来实现这一点。将contenteditable属性设置为true的div与css-shapes结合可以使文本区域成为任何形状。

目前Chrome金丝雀已经支持 css-shapes。使用css-shapes的一个例子是:

enter image description here

这里他们使用多边形形状来定义文本流。它应该可以创建两个多边形来匹配你想要的文本区域的形状。

有关css-shapes的更多信息请参见:http://sarasoueidan.com/blog/css-shapes/

在Chrome Canary中启用css形状:

复制粘贴 //flags/#enable-experimental-web-platform-features 地址栏，然后按enter。李< / >
单击其中的“Enable”链接部分。李< / >
点击底部的“重新启动”按钮浏览器窗口。< / p >
来自:http://html.adobe.com/webplatform/enable/ < / p >

.container {
overflow: hidden;
shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
font-size: 0.8em;
}
/** for red border **/


.container:before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 190px;
height: 190px;
background-color: white;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
.container:after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 190px;
height: 190px;
background-color: white;
border-left: 1px solid red;
border-bottom: 1px solid red;
}

<div class="container" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.


</div>

使用:http://betravis.github.io/shape-tools/polygon-drawing/创建的多边形

结果

enter image description here

http://jsfiddle.net/A8cPj/1/

小开

你也可以用CSS地区这样做

使用区域，您可以使用CSS属性将内容流到现有的区域有样式的容器，指定你选择的任何容器顺序，不管它们在页面上的位置。

(Web平台)

enter image description here

[目前在WebKit Nightly, Safari 6.1+和iOS7中支持，并且在启用标志后已在chrome和opera中使用:enable-experimental-web-platform-features - caniuse，网络平台]

提琴

所以你可以使文本区域形状通过流动的文本通过2个区域，并通过添加contentteditable内容编辑它。

标记

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

(相关的)的CSS

#content {
-ms-flow-into: article;
-webkit-flow-into: article;
}


.region {
-ms-flow-from: article;
-webkit-flow-from: article;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 0 1px;
margin: auto;
left:0;right:0;
border: 2px solid lightBlue;
}


#box-a {
top: 10px;
background: #fff;
z-index: 1;
border-bottom: none;
}


#box-b {
top: 210px;
width: 400px;
overflow: auto;
margin-top: -2px;
}

结果:

enter image description here

有关区域的更多信息-这里有一篇好文章:CSS3区域:使用HTML和CSS3的富页面布局

小开

如果，出于某种原因，你真的需要支持没有contenteditable的浏览器，你可能可以在JavaScript中通过使用事件来做同样的事情，尽管这是一个非常混乱的解决方案。

伪代码:

focused=false;
when user clicks the div
{
focused=true;
}
when user clicks outside the div
{
focused=false;
}
when user presses a key
{
if (focused)
{
add character of key to div.innerHTML;
}
}

不寻常的文本区域形状?

简介

用div contenteditable解决

完整的代码示例

标记

CSS

提琴

标记

(相关的)的CSS

用div `contenteditable`解决