通常文本区域是矩形或正方形,就像这样:
但我想要一个自定义形状的文本区域,就像这样,例如:
这怎么可能呢?
通常文本区域是矩形或正方形,就像这样:
但我想要一个自定义形状的文本区域,就像这样,例如:
这怎么可能呢?
当前回答
你也可以用CSS区域来做到这一点
对于区域,您可以使用CSS属性将内容流动到现有的区域 有样式的容器,指定你选择的任何容器顺序, 不管它们在纸上的位置。
(网络平台)
[目前支持WebKit Nightly, Safari 6.1+和iOS7,并已在chrome和opera启用标志:enable-experimental-web-platform-features - caniuse, Web Platform]
小提琴
所以你可以使文本区域形状通过流动的文本通过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;
}
结果:
有关区域的更多信息-这里有一篇好文章:CSS3区域:使用HTML和CSS3的富页面布局
其他回答
你可以使用一个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>
也许这是可能的内容编辑?
它不是一个文本区域,但如果你成功地用这个形状创建了一个div,它就可以工作。
我认为这是不可能的只有textarea…
一个小例子:http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</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区域来做到这一点
对于区域,您可以使用CSS属性将内容流动到现有的区域 有样式的容器,指定你选择的任何容器顺序, 不管它们在纸上的位置。
(网络平台)
[目前支持WebKit Nightly, Safari 6.1+和iOS7,并已在chrome和opera启用标志:enable-experimental-web-platform-features - caniuse, Web Platform]
小提琴
所以你可以使文本区域形状通过流动的文本通过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;
}
结果:
有关区域的更多信息-这里有一篇好文章:CSS3区域:使用HTML和CSS3的富页面布局