通常文本区域是矩形或正方形,就像这样:
但我想要一个自定义形状的文本区域,就像这样,例如:
这怎么可能呢?
通常文本区域是矩形或正方形,就像这样:
但我想要一个自定义形状的文本区域,就像这样,例如:
这怎么可能呢?
当前回答
文本框中的长行文本会使光标下降到中间边缘,我似乎无法修复这个问题。
**[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/
其他回答
也许这是可能的内容编辑?
它不是一个文本区域,但如果你成功地用这个形状创建了一个div,它就可以工作。
我认为这是不可能的只有textarea…
一个小例子:http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</div>
文本框中的长行文本会使光标下降到中间边缘,我似乎无法修复这个问题。
**[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区域来做到这一点
对于区域,您可以使用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的富页面布局
这是不可能的,陛下!文本区域通常是一个矩形或方形框,您可以在其中输入。
然而,要做出这样的东西,你可以使用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”链接 部分。 点击浏览器底部的“重新启动”按钮 窗口。