Question

我创建了一个具有contenteditable区域的文本，但遇到一个问题：我希望contenteditable区域具有最小宽度，因此即使删除其中的文本，用户也可以看到该区域，这就是为什么我使用display：inline-block但contenteditable区域却没有中断到下一行它只会扩展，并且当我删除display：inline-block contenteditable区域时，它会在到达行尾时中断到下一行，但是我不能使用最小宽度，因此如果用户删除contenteditable区域中的文本，它只会消失所以您需要重新加载页面。那我怎么能同时拥有它们呢？

span.a{
    
   display:inline-block;
    min-width:20px; 
    border:1px solid black;
   
}

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span  class="a" contenteditable="true" >AAAAAAAAAAAAAAAAAAAAA </span> took a galley of type and scrambled it to make a type specimen book. 
   It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
   It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
   and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Answer 1

一个想法是保持元素内联，并考虑使用:empty伪类在没有内容时添加一些填充。这样做可以确保该区域始终可见：

span.a {
  border: 1px solid black;
}
span.a:empty {
  padding-left:10px;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="a" contenteditable="true">AAAAAAAAAAA AAAAAAAAAA </span> took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

如何具有最小宽度并同时中断下一行以使内容可编辑

1 个答案: