如何将其大小限制的可满足段落插入？

Question

我需要一个编辑一行段落，以便插入其中的文本一定不能溢出其大小。

目前，我正在使用CSS试图隐藏溢出并避免多行（不显示该段落的孩子）。

但是，理想情况下，我需要插入到段落中的文本在溢出后立即被“剪切”。

这是我到目前为止的代码（也 jsfiddle ）：

div
{
  width: 50vw;
  height: 50vh;
  margin: 10px auto;
  background-color: gray;
}

p
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  background-color: brown;
  text-align: center;
  
  white-space: nowrap;
  overflow-x: hidden;
}

/* Avoiding multiple lines */
p *
{
  display: none;
}

<div>
  <p contentEditable="true">
    Edit me! Unfortunally I can be overflowed... :(
  </p>
</div>

Answer 1

您可以使用word-break：在这种情况下属于属性

div {
  width: 50vw;
  height: 50vh;
  margin: 10px auto;
  background-color: gray;
}

p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  background-color: brown;
  text-align: center;
  word-break: keep-all;
  white-space: normal;
}

p * {
  display: none;
}

<div>
  <p contentEditable="true">
    Edit me! Unfortunally I can be overflowed... :(
  </p>
</div>