Para um aplicativo que estamos desenvolvendo na empresa em que trabalho, precisamos de uma entrada que suporte a inserção de emoticons em nosso aplicativo Web baseado em JS. No momento, estamos usando uma entrada com os códigos de acesso dos emoticons (ou seja, ':-)') e gostaríamos de mudar para inserir imagens gráficas reai

Nosso plano original era usar umcontenteditable <div>. Estamos usando ouvintes para o evento de colar, bem como as diferentes interações tecla / mouse para garantir que nenhuma marcação indesejada entre no conteúdo editável (removemos o texto de suas tags de contêiner e deixamos apenas as tags de imagem que inserimos).

No entanto, o problema agora é que a div é redimensionada se você colocar conteúdo suficiente (ou seja, sua altura aumenta). Não queremos que isso aconteça, nem é aceitável que o texto seja oculto (ou seja, plainoverflow: hidden). Tão

Existe uma maneira de fazer com que a div editável do conteúdo se comporte como uma entrada de linha únic

Eu gostaria que houvesse uma propriedade attribute / css relativamente simples que eu tenha perdido, que faça o que eu quero, mas se necessário, as sugestões CSS + JS também serão apreciada