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


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?


32
2018-03-19 14:16


origen


Respuestas:


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.


-10
2018-03-19 14:26



Sé que esta es una vieja pregunta, pero estaba teniendo el mismo problema y me encontré esta publicación de blog de Front End Tricks And Magic eso funcionó para mí, así que pensé que lo compartiría en caso de que las personas aún 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' );
});

15
2017-11-05 18:41



Ajuste text-overflow:ellipsis en la entrada en sí me sirvió. Trunca y coloca las elipsis cuando la entrada está desenfocada.


8
2017-11-24 03:21



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.


4
2018-03-19 14:31