Question

我有一个具有 contentEditable div属性的简单true，并且我还应用了ellipsis CSS 。

contentEditable 的行为很好，当内容较少且未被截断时。

但是当您编写多余的内容并且内容开始被截断时，它将在右侧显示多余的空格。

div {
  border-bottom: 2px solid #ccc;  
  outline: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 5px;
  width: 350px;
}

<div contentEditable="true"></div>

Answer 1

这是一个可能的解决方案。您可能需要稍微更改HTML结构。取一个父元素，将截断的元素包装到其中，并使用focus属性。

这里是一个例子。

div {
  overflow: hidden;
  width: 350px;
  display: inline-block;
  position: relative;
  border-bottom: 2px solid #ccc;
}

span {
  outline: 0;
  width: auto;
  white-space: nowrap;
  padding-bottom: 5px;
  display: inline-block;
  overflow: hidden;
}

span:not(:focus) {
  width: 100%;
  margin-bottom: 2px;
  text-overflow: ellipsis;
}

<div>
  <span contenteditable="true"></span>
</div>

Answer 2

您可以有两种解决方案：第一个是多行，第二个是单行。查看下面的两个片段：

div {
  overflow: hidden;
  width: 350px;
  display: inline-block;
  position: relative;
  border-bottom: 2px solid #ccc;
  height: 20px;
}

span {
  outline: 0;
  width: auto;
  white-space: nowrap;
  padding-bottom: 5px;
  display: inline-block;
  overflow: hidden;
}

span:not(:focus) {
  width: 100%;
  margin-bottom: 2px;
  text-overflow: ellipsis;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div contentEditable="true"></div>
</body>
</html>

div {
  overflow: hidden;
  width: 350px;
  display: inline-block;
  position: relative;
  border-bottom: 2px solid #ccc;
}

span {
  outline: 0;
  width: auto;
  white-space: nowrap;
  padding-bottom: 5px;
  display: inline-block;
  overflow: hidden;
}

span:not(:focus) {
  width: 100%;
  margin-bottom: 2px;
  text-overflow: ellipsis;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div contentEditable="true"></div>
</body>
</html>

Answer 3

我不确定，但我删除了 text-overflow: ellipsis;* 因为它造成了空白问题 stackoverflow answer

div[contenteditable="true"] {
  white-space: nowrap;
  width: 350px;
  overflow: hidden;
  outline: none;
  border-bottom: 2px solid #ccc;
}

div[contenteditable="true"] br {
  display: none;
}

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

<div contenteditable="true"></div>

Answer 4

您可以在模糊时将 div 向左滚动。

function scrollBack(el) {
    el.scrollLeft = 0;
}

div {
    border-bottom: 2px solid #ccc;
    outline: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-rendering: initial;
    padding-bottom: 5px;
    width: 350px;
}

div:focus {
    text-overflow: initial;
}

<div contenteditable="true" onblur="scrollBack(this)"></div>

截断可编辑的内容，并留出更多空间

4 个答案: