可编辑的<span>,居中文本

时间:2018-08-19 14:18:06

标签: html css

我想要一个内容可编辑的<span>,它的宽度随着我们键入而增加,并且文本居中。 如果可能的话,我想要一个不暗示Javascript的解决方案。

如您所见,text-align属性不执行任何操作:

#item {
  border: solid;
  text-align: center;
}
<span id="item" contenteditable="true">Hello</span>

我应该怎么办?

4 个答案:

答案 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>