使用CSS显示所有字符的内容可编辑单行

contenteditable single-line showing all the characters using CSS

本文关键字：编辑 单行 字符 CSS 显示 使用      更新时间：2024-03-22

如果用户关注div，我需要截断字符——它显示所有字符而不截断。

我们归档了相同的文件，但我们得到了多条

但我需要以用户为中心，div需要在一行中显示所有字符。

演示

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;
}

也许是这样？

看看这个小提琴

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

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

只需将width更新为auto，如下所示：

.single-line:focus {
   width: auto;
}


检查演示

在：foucs-css中进行此更改。

.single-line:focus {
    white-space:normal;
    width:100%; //change
}
相关文章：