Remove all the blanks of an HTML element

1

I have tags which as text have links to websites, that is, something like this.

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

The problem I have is that when doing the responsive page it overflows, since the URLs are very long (the labels are wider than the container).

I have tried to enter a space in the URLs, so the problem of reducing the size of the display on which it is displayed disappears, but of course I have entered a space, if the display is larger this space is seen.

Then the theme is as follows: Is there any CSS property that allows you to remove all the white spaces in the text of a label and thus avoid having to remove these with JS?

    
asked by jose_smt 03.08.2018 в 14:10
source

2 answers

3

You do not need to add spaces, just define the property overflow-wrap in 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>
    
answered by 03.08.2018 в 14:30
1

I think what you need is:

text overflow

You have a test here

If you use% in the max width, you can do it responsive

    
answered by 03.08.2018 в 14:32