Início / coding / Perguntas / 78692845
Accepted
Basj
Asked: 2024-07-01 22:41:27 +0800 CST

Preenchimento direito da área de texto ao usar uma barra de rolagem horizontal?

  • 772

Ao criar um textareacom barra de rolagem horizontal, como habilitar um preenchimento no lado direito? CSS paddingfunciona no canto superior direito, mas não no lado direito:

insira a descrição da imagem aqui

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  border: 1px solid black;
  height: 5rem;
  width: 14rem;
  padding: 0.75rem;
}
<textarea>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</textarea>

html

2 respostas

  1. Questão interessante. Eu usaria um div editável de conteúdo.

    #test {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: scroll;
        border: 1px solid black;
        height: 5rem;
        width: 14rem;
        padding: 0.75rem;
    }
    <div id="test" contenteditable="plaintext-only">foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</div>

    • 1
  2. Best Answer

    Este parece ser um bug conhecido ( Problema #40572939 ) especificamente para textarea e tem permanecido aberto sem qualquer correção por um tempo no Chromium. Conforme citado na edição:

    Isso se deve ao fato de o cálculo de estouro de layout não incluir o preenchimento final embutido para filhos no nível do bloco. Isso pode ser corrigido se mudarmos nosso comportamento aqui.

    Por enquanto, a única solução que conheço envolve mudar textareapara algo contenteditablesemelhante ao que @ spyder1329 postou .

    • 1

relate perguntas