0

Tengo etiquetas las cuales como texto tienen enlaces a webs, es decir, algo como esto.

<a href="http://www.asdfasdfasdfasdfasdfasdfasdf.com/asdfassdfasdf....">http://www.asdfasdfasdfasdfasdfasdfasdf.com/asdfassdfasdf....</a>

El problema que tengo es que al hacer la pagina responsive esta se desborda, ya que las URL son muy largas (las etiquetas son mas anchas que el contenedor).

He probado a introducir un espacio en las URL con lo cual el problema al reducir el tamaño del display en que se visualice esta desaparece, pero claro como he introducido un espacio, si el display es mas grande dicho espacio se ve.

Entonces el tema es el siguiente: ¿Hay alguna propiedad CSS que permita eliminar todos los espacios en blanco del texto de una etiqueta y asi evitar tener que quitar estos con JS?

2
  • 2
    Sería ideal que pusieras un ejemplo mínimo verificable en la pregunta (con cadenas/urls de prueba) para que podamos ver el problema y ayudarte con el problema concreto que tengas.
    – Alvaro Montoro
    Commented el 3 ago. 2018 a las 12:47
  • Recuerda aceptar la respuesta de @EduenSarceño si solucionó tu inquietud... esto es importante para futuras referencias.
    – DjCrazy
    Commented el 22 mar. 2019 a las 17:28

2 respuestas 2

4

No hace falta que agregues espacios, basta con definir la propiedad overflow-wrap en break-word

.etiqueta {
  display: inline-block;
  max-width: 300px;
  background-color: blue;
  white-space: nowrap
}

.wrap {
  background-color: yellow;
  overflow-wrap: break-word;
  white-space: normal !important
}
<span class="etiqueta">data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqaOe/6mjnv+po57/qaOe/6mjnv+po57/qaOe/6mjnv+po57</span>
<hr />
<span class="etiqueta wrap">data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqaOe/6mjnv+po57/qaOe/6mjnv+po57/qaOe/6mjnv+po57</span>

1
  • Gracias, no conocía la propiedad overflow-wrap y consultado la W3schools no la he encontrado. Ahora funciona perfectamente solo añadiendo esa linea en el CSS.
    – jose_smt
    Commented el 3 ago. 2018 a las 16:27
1

Creo que lo que necesitas es:

text overflow

Tienes una prueba aqui

Si utilizas % en el max width, puedes hacerlo responsive

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.