提问人：For 提问时间：5/28/2022 更新时间：5/28/2022 访问量：24
如何使插入到内容中可编辑的段落受其大小的约束？
How to make insertion into contentEditable paragraph bound by its size?
问：
我需要一个可编辑的单行段落，以便插入其中的文本不得超出其大小。
我目前正在使用 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>答：
0赞
Sumit Sharma
5/28/2022
#1
在这种情况下，您可以使用属性word-break: keep-all;
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>
评论