Question

如果用户关注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;
}

Answer 1

也许是这样的？

See this fiddle

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

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

Answer 2

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

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

检查demo

Answer 3

在：foucs css。

中进行此更改

.single-line:focus {
    white-space:normal;
    width:100%; //change
}

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

3 个答案: