javascript - 使用 CSS 显示所有字符的 contenteditable 单行

Question

如果用户聚焦显示所有字符而不 chop 的 div，我需要 chop 字符。

我们归档了相同的，但是我们得到了多行

但我需要用户关注 div 需要在一行中显示所有字符。

DEMO

HTML:

这应该有效这应该有效这应该有效这应该有效这应该有效这应该有效这应该有效这应该有效这应该有效这应该有效这应该有效

CSS:

 .single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
}

    [contenteditable="true"].single-line {
        white-space: nowrap;
        width:200px;
        overflow: hidden;
    } 
    [contenteditable="true"].single-line br {
        display:none;

    }
    [contenteditable="true"].single-line * {
        display:inline;
        white-space:nowrap;
    }


 .single-line:focus {
    white-space:normal;
}

Answer 1

大概是这样的？

See this fiddle

我在容器上添加了一个固定的 height 并禁用了焦点上的 text-overflow 属性。

.single-line:focus {
   text-overflow: inherit;
}