¿Cómo usar elipsis de desbordamiento de texto en un campo de entrada html?

Question

Mi página web tiene campos de entrada a la cual he aplicado el siguiente CSS:

.ellip { 
    white-space: nowrap; 
    width: 200px; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
} 

Pero esto no parece tener ningún efecto. ¿Me falta algo obvio aquí o no es posible tener una elipsis en un campo de entrada usando solo CSS?

Answer 1

Un campo es un elemento con sus propias reglas. El campo de entrada se implementa de forma tal que si el texto es más largo que el campo, el texto quedará oculto.

La razón para esto es que si usa el campo en un formulario y sería posible usar elipsis de desbordamiento de texto, entonces solo transmitiría el contenido truncado, lo que no es el efecto deseado.

Answer 2

Según mis pruebas, Chrome, Safari y Firefox ahora lo admiten.

Sin embargo, tienen efectos ligeramente diferentes.

En desenfoque Firefox se agrega ... a la derecha del texto, pero solo si hay texto oculto en el lado derecho del cuadro de texto.

Mientras que en el desenfoque, Chrome parece saltar al principio del texto y agrega el ... al final, independientemente de dónde haya dejado la posición de desplazamiento del texto.

Answer 3

Sé que esta es una pregunta antigua, pero estaba teniendo el mismo problema y me encontré con this blog post from Front End Tricks And Magic que funcionó para mí, así que pensé que lo compartiría en caso de que la gente todavía tenga curiosidad. La esencia del blog es que PUEDE hacer una elipsis en una entrada en IE, sin embargo, solo si la entrada tiene un atributo de solo lectura.

Obviamente, en muchos escenarios, no queremos que nuestra entrada tenga un atributo de solo lectura. En ese caso puede usar JavaScript para alternarlo. Este código se toma directamente del blog, por lo que si encuentras esta respuesta útil, puedes considerar revisar el blog y dejar un comentario de agradecimiento al autor.

HTML:

<div class="long-value-input-container"> 
    <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long- 
    value-input" readonly /> 
</div> 

CSS:

.long-value-input { 
    width: 200px; 
    height: 30px; 
    padding: 0 10px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

Javascript (jQuery)

// making the input editable 
$('.long-value-input').on('click', function() { 
    $(this).prop('readonly', ''); 
    $(this).focus(); 
}) 

// making the input readonly 
$('.long-value-input').on('blur', function() { 
    $(this).prop('readonly', 'readonly'); 
}); 

Answer 4

Configuración text-overflow:ellipsis en la entrada sí hizo el truco para mí. Trunca y coloca las elipsis cuando la entrada está desenfocada.