CODEWITHSUNDEEP
css
ZACK_G
ZACK_G

Reputation: 115

How to have min-width and break to next line for contenteditable at same time

I created a text with contenteditable area but I faced a problem : I want contenteditable area to have min width so user will see area even after deleting text in it that's why I used display:inline-block but the contenteditable area does not break to next line it expand only and when I remove display:inline-block the contenteditable area break to next line when reach the end of the line but I can not use min width so if the user delete the text in contenteditable area it just disappear so you need to rreload the page .So how can I have them both ?

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.

Upvotes: 1

Views: 290

Answers (1)

Temani Afif
Temani Afif

Reputation: 272919

One idea is to keep the element inline and consider the :empty pseudo class to add some padding when there is not content. Doing so you will be sure the area will always be visible:

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.

Upvotes: 1

Related Questions