Tengo que imprimir varios elementos de área de texto en mi código. Aquí hay un ejemplo de uno:
@media screen { textarea[division]{ font-size: 13px; height: 70px; resize: none; text-align: center; } textarea[top]{ float: right; width: 150px; } } @media print { textarea { margin:0; padding:0; border:none; display:flex; overflow: hidden; } textarea[division]{ overflow: hidden; border: none; margin:0; padding:0; margin-bottom: 0; white-space: nowrap; resize: none; display:block; font-size: 13px; } button{ visibility: hidden; } } <div><p><b><br>Division:</b><textarea id='transfer_out_division' type='text' placeholder="EMD - AFC Program & Information Management" top required division></textarea></p></div> <button type="button" onclick="window.print();return false;"/>EXPORT PDF</button>Me gustaría que el texto se imprima en la misma línea que División y pasar el texto a la siguiente línea una vez que se quede sin espacio. ¿Cómo solucionaría este problema?
Corrijo la parte HTML, porque había algunas etiquetas <br> y no funciona muy bien con la ubicación de CSS. También agrego la clase .container para usar flex-box.
<p class="container"> <b>Division:</b> <textarea id='transfer_out_division' type='text' placeholder="EMD - AFC Program & Information Management" top required division></textarea> </p>Y la parte CSS:
@media print { textarea { margin: 0; padding: 0; border: none; overflow: hidden; } textarea[division] { overflow: hidden; border: none; margin: 0; padding: 0; margin-bottom: 0; white-space: nowrap; resize: none; font-size: 13px; } button { visibility: hidden; } .container { display: flex; } }