Как сделать contenteditable = 'false' div одинаковой высоты, как contenteditable = 'true'?

У меня есть div, который использовался как «ввод» с помощью contenteditable, и он отлично работает, когда он включен. Но есть один сценарий, когда мне нужно отключить «ввод», установив contenteditable='false', что приводит к тому, что div теряет свою высоту (как вы можете видеть в this JSFiddle).Как сделать contenteditable = 'false' div одинаковой высоты, как contenteditable = 'true'?

<div contenteditable="true" class="visible-borders"></div> 
<div contenteditable="false" class="visible-borders"></div>

У вас, ребята, есть решение? Я хотел чего-то, что не связано с min-height. И нет, я не могу изменить код, чтобы использовать что-то другое, кроме contenteditable. Я использую чей-то код.

источник

2015-10-22 Higgor Valença

Это происходит только тогда, когда 'div' пуст (и nlike версия 'contenteditable', которая оставляет место для ввода текста). Можете ли вы добавить текст, даже ' ', к нередактируемому 'div'? https://jsfiddle.net/a5c7fo9c/2/ –

Да, только когда он пуст. Я не могу, это чужой компонент. Я могу перезаписать CSS. –

Это потому, что contenteditable=false ДИВ не имеет никакого содержания и ничего не держит его открытым, в то время как содержание редактируемый элемент имеет по умолчанию стиль, который показывает его редактируемым (в частности: -webkit-user-modify: read-write)

Вы могли бы просто дать .visible-borders в мин- высота. Если (по какой-то причине неустановленный) вы не хотите использовать мин-высоту, вы можете вставить некоторое содержание псевдо:

.visible-borders:before { 
    content: "\00a0" 
}

https://jsfiddle.net/a5c7fo9c/6/

источник

2015-10-22 16:30:47 Moob

Прочитано OP: Мне нужно что-то, что не связано с минимальной высотой –

Вы можете использовать псевдо-элементы

CSS

.visible-borders { 
    border: solid 1px black; 
    display:block; 

} 
.visible-borders:after { 
    content:"\00a0"; 
}

DEMO HERE

источник

2015-10-22 16:22:17

contenteditable атрибут оставляет пространство для текста, который будет написано, если вы хотите, чтобы быть равным выберите любую высоту, превышающую пространство, необходимое для написания строки текста, и нет необходимости в contenteditable = false, потому что это t он по умолчанию в html, когда он не указан!

источник

2015-10-22 16:27:29 Noctisdark

Вы можете включить «пустой» (нулевой ширины, невидимый) псевдо-контента в версии contenteditable=false:

.visible-borders { 
 
    border: 1px solid black; 
 
} 
 

 
.visible-borders[contenteditable=false]:after { 
 
    content: "\200B"; /* zero-width space */ 
 
}

<div contenteditable="true" class="visible-borders"></div> 
 
<br /> 
 
<div contenteditable="false" class="visible-borders"></div>

источник

2015-10-22 16:37:36

Как сделать contenteditable = 'false' div одинаковой высоты, как contenteditable = 'true'?

ответ

Смежные вопросы