Question

一旦用户单击文本，我们将允许用户编辑文本。...

当用户添加更多文本时，文本仅像Link1一样向右移动

要求：

，但是它应该像此Link2或website一样沿两个方向移动。...

逻辑：

好像我需要减小位置的值。一旦用户添加了更多文本，该如何实现呢？

.text
{

position:absolute;
left: 500px;
font-size:28px;
}

<p contenteditable="true" class ="text">text</p>

Answer 1

对于文本，您可以使用text-align: center在两个方向上获得相同的距离，但是当您使用position时，元素取决于relative position，因此要获得相同的距离，您需要使用{{ 1}}属性进行管理

使用transform CSS可以解决您的问题。

translate

Answer 2

替换以下位置：绝对和左：500px属性随着文本的增长，“ text-align：center”会在两个方向上都提供均匀的间距。

<p contenteditable="true" class ="text">text</p>


.text
{
text-align: center;
font-size:28px;
}

Answer 3

然后，我认为以下想法在这种情况下会起作用... 根据需要修改给定的宽度和最大高度...

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid green;
  display: flex;
  align-items: center;
}

.textHolder {
  padding: 0 10px;
  width: 150px;
  max-height: 100px;
  margin: 0 auto;
  text-align: center;
}

.text {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  outline: 0;
}

<div class="circle">
  <div class="textHolder">
    <p contenteditable="true" class="text">Type</p>
  </div>
</div>

这是小提琴 https://jsfiddle.net/wfbmyzuv/1/

当用户添加更多内容时，降低“位置左侧”值

3 个答案: