如何在溢出时在元素的左侧和右侧水平相等地拆分文本？

Question

当用户在div（contentEditable =“ true”）中键入文本时，我正在尝试对div内容实现以下效果。

.editor {
  width: 200px;
  height: 200px;
  outline: 0;
  position: absolute;
  left:25%;
  border: 1px solid green;
}

<div class="editor" contentEditable="true"><p>type here ...<p></div>

Answer 1

这样的事情怎么样？

.editor {
    width: 200px;
    height: 200px;
    outline: 0;
    position: absolute;
    left:25%;
    border: 1px solid green;
    word-wrap: normal;
}
.editor p {
   position: absolute;
   left: 50%;
    transform: translateX(-50%);
}

<div class="editor" contentEditable="true"><p>type here ...<p></div>

Answer 2

您的意思是否如下：

var contents = document.getElementsByClassName('content');

for(let i = 0; i < contents.length; i++)
{
  var content = contents[i];
  var editor = content.parentElement;
  var width = content.getBoundingClientRect().width;
  content.style.setProperty('--content-width', width+'px');
  
  
  editor.addEventListener('input', function() {
  var width = content.getBoundingClientRect().width;
  content.style.setProperty('--content-width', width+'px');
  });
}

.editor {
  width: 200px;
  height: 200px;
  outline: 0;
  position: relative;
  left:25%;
  border: 1px solid green;
}

.editor p {
  white-space: nowrap;
  position: absolute;
  z-index: 1;
  width: auto;
  min-width: var(--content-width);
  top: 50%;
  left: calc(-1 * (var(--content-width) / 4));
}

<div class="editor" contentEditable="true"><p class="content">type here ...<p></div>

Answer 3

PGUSER=dbuser PGHOST=database.server.com PGPASSWORD=secretpassword PGDATABASE=mydb PGPORT=3211 node script.js

将此添加到您的代码中。

Answer 4

那呢？

.input-outline {
      width: 100px;
      margin: 25px auto;
      border: 1px solid green;
      position: relative;
      height: 500px;
    }
    
    input {
      width: 300px;
      border: none;
      position: absolute;
      top: 50%;
      left: -100%;
      transform: translateY(-50%);
      background: transparent;
    }

<div class="input-outline">
      <input type="text" value="this a long text blablabla heheheheeheheheheh">
    </div>