poner - ¿Cómo usar puntos suspensivos de desbordamiento de texto en un campo de entrada html?

texto desbordado css

Question

Mi página web tiene campos de entrada a los que 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 puntos suspensivos en un campo de entrada usando solo CSS?

Answer 1

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

Answer 2

Sé que esta es una vieja pregunta, pero estaba teniendo el mismo problema y me encontré con esta entrada de blog de Front End Tricks And Magic que funcionó para mí, así que pensé que la compartiría en caso de que las personas todavía tuvieran 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 (usando 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 3

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 4

De mi prueba de Chrome, Safari y Firefox ahora lo soportan.

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 anexa ... al final, independientemente de dónde haya dejado la posición de desplazamiento del texto.