0
246
ViewsCómo superponer divs a la derecha de cada línea en un área de texto
Quiero alinear el texto a la derecha en cada línea en un área de texto que un usuario está escribiendo así:
También debería admitir el desplazamiento de esta manera (¿ves cómo se corta la parte superior cuando está fuera de la vista?):
¿Cómo podría hacer eso?
EDITAR:
Además, cualquier div a la derecha debe animarse al pasar el mouse y, cuando se hace clic, el contenido debe copiarse en el portapapeles. Al igual que:
1 answers
Answer question0
Simplemente haga dos áreas de texto diferentes y coloque una a la izquierda y la segunda a la derecha. Luego haz que se vean visualmente como uno: for left make border-right: 0; para la derecha - border-left: 0;
Para su tarea, podría usar texterea y div así:
* { margin: 0; padding: 0; } .textarea-block { box-sizing: border-box; display: inline-block; border: 1px solid #eee; padding: 10px; width: 400px; /* Here you could use % or wh to make it looks better in your app */ } /* Don't forget to make a clearfix after floats */ .textarea-block:after { content: ''; clear: both; } .left { font-family: Arial; font-size: 16px; border: 0; width: 50%; } .right { font-family: Arial; font-size: 16px; display: inline-block; text-align: right; width: 50%; float: right; } <div class="textarea-block"> <textarea name="" cols="30" rows="10" class="left">First line Second line</textarea> <div class="right"> First line <br>Second line </div> </div> Solo asegúrese de hacer el mismo font-size font-family para textarea y div para que el texto se vea igual.