我想要一个内容可编辑的<span>
,它的宽度随着我们键入而增加,并且文本居中。
如果可能的话,我想要一个不暗示Javascript的解决方案。
如您所见,text-align属性不执行任何操作:
#item {
border: solid;
text-align: center;
}
<span id="item" contenteditable="true">Hello</span>
我应该怎么办?
答案 0 :(得分:1)
您需要插入span
内联代码块:
#item {
border: solid;
text-align: center;
display:inline-block;
}
<span id="item" contenteditable="true">Hello some text and more teeeexxt some text and more teeeexxt some text and more teeeexxt some text and more teeeexxt some text</span>
答案 1 :(得分:0)
这是一个可能的解决方案:
#container {
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
position: relative;
}
#item {
border: solid;
text-align: center;
}
<div id="container"><span id="item" contenteditable="true">Hello</span></div>
但是,当然,我将其包裹在div中以便对其进行整理
答案 2 :(得分:0)
尝试添加“显示:块;”在CSS中。
#item {
display: block;
border: solid;
text-align: center;
}
答案 3 :(得分:0)
您只需要用div
包住跨度并赋予text-align: center
样式即可达到您想要的效果。
#item {
border: solid;
}
.text-center {
text-align: center;
}
<div class="text-center">
<span id="item" contenteditable="true">Hello</span>
</div>