0
123
ViewsAgregue puntos suspensivos tempranos si el niño es más ancho que el padre
Estoy usando text-overflow: ellipsis; para el texto desbordado de un elemento secundario.
En el caso de que el elemento secundario sea más ancho que el elemento principal, no se pueden ver los puntos suspensivos.
input { border: 1px solid black; text-overflow: ellipsis; width: 100px; } div { border: 1px dotted black; width: 80px; overflow: clip; } /* Simulate overflow: clip; for Safari */ div > input { clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%); } <input type="text"> <div><input type="text"></div>Comportamiento actual:
Comportamiento deseado:
No puedo hacer artificialmente la propiedad de width del niño más pequeña en mi caso, porque otra regla CSS depende de ello (para min-content de un elemento de entrada, considerado sin contenido a menos que se especifique el width )
Desafortunadamente no hay overflow: ellipsis; y agregando text-overflow: ellipsis; en el padre no lo arregla.
2 answers
Answer question0
no puede hacer que la entrada sea más ancha que su contenedor div y elegir dónde comienzan los puntos suspensivos en la entrada. el resto de la entrada se muestre, y no tiene sentido hacerlo en primer lugar.
solo haga que el desbordamiento de la entrada esté oculto y el espacio en blanco: ahora cambie y haga que el ancho de la entrada sea el mismo que su contenedor y funciona bien
input { border: 1px solid black; text-overflow: ellipsis; width: 100px; overflow: hidden; white-space: nowrap; } div { border: 1px dotted black; width: 80px; overflow: clip; } /* Simulate overflow: clip; for Safari */ div > input { clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%); width: 100%; } <input type="text"> <div><input type="text"></div>0
¿Por qué no definirles clases para que no afecte a otros elementos?
Como en el siguiente ejemplo: he definido input-1 y class-1 como la clase para diferentes entradas
.input-1 { border: 1px solid black; text-overflow: ellipsis; width: 100px; } .class-2 { border: 1px dotted black; width: 80px; overflow: clip; text-overflow: ellipsis; } /* Simulate overflow: clip; for Safari */ div > input { clip-path: polygon(0 0, 80px 0, 80px 100%, 0 100%); } <input type="text" class="input-1"> <div><input type="text" class="class-2"></div>