css - 如何同时具有最小宽度和中断到下一行以进行内容编辑

Question

我创建了一个带有 contenteditable 区域的文本，但我遇到了一个问题:我希望 contenteditable 区域具有最小宽度，这样用户即使在删除其中的文本后也会看到该区域，这就是我使用 display:inline-block 但 contenteditable 区域没有的原因中断到下一行它只展开，当我删除显示时:内联 block 内容可编辑区域在到达行尾时中断到下一行但我不能使用最小宽度所以如果用户删除内容可编辑区域中的文本它就会消失所以你需要重新加载页面。那么我怎样才能同时拥有它们呢？

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.