How to put three points in a word if the text overflows the page?

Asked

Viewed 3,986 times

1

I would like to know how to put three points in the last word that exceeds the page limit.

This image is like the current text.

inserir a descrição da imagem aqui

And that image is how I want you to get the three dots

inserir a descrição da imagem aqui

Here is the entire archive of the site https://www.dropbox.com/sh/vv3hm7mtg348ot4/AABAVbKixOZEIZi2C_hvaEdfa?dl=0

HTML: Pastebin.com/Jfardhih

CSS: Pastebin.com/Khnriier

I’m afraid mobile users don’t realize they have more text down so I want to add these three points.

here is the site also if you want to test on your cell phones http://ticianatc.esy.es/VerticalShowcaseSlider/

javascript html css mobile ux
  • 2

    I have no Dropbox account and Dropbox does not let me download the files without logging in. You would not be able to copy the pertinent files here if you find my response insufficient?

  • Opa blz I will edit the post

  • Here is the HTML: http://pastebin.com/JfaRDHih and Here is the CSS: http://pastebin.com/KhNRiier

  • Your question is essentially one of implementation: you want to know how to build reticence, not whether that is the best approach. Soon, the answer you already have seems great. Still, you used the tag [tag:UX]. Soon, I’ll give an opinion: this I don’t think so the best approach. The standard of almost all mobile operating systems is also to use a scrolling area (or a scrolling indicator), such as the side bars on the right of that image, for example.

  • So why don’t you follow what’s agreed and take advantage of what users already know about how to use mobile systems? Also, reticence in text they can also indicate figures of language. They also indicate thought, omission or even an idea that was left unfinished (and that would be up to the reader to interpret, for example). It is not exactly the case of this example, where the text becomes quite meaningless without the rest, but depending on the text it may still occur that the user does not understand that there is more content...

  • Yes it is true Luiz, but what intrigues me is that this scroll bar does not appear for the user at least on my phone. And I’m worried that some of you won’t be aware that there’s more text down. I would just like a way to create those reticence and make them disappear by scrolling the text down.

  • But it’s just out of curiosity, I won’t use the site I’m creating

  • "[...] what intrigues me is that this scrollbar does not appear to the user at least on my mobile." Well, then the problem is another. You should have asked why the bar doesn’t appear.

Show 3 more comments

1 answer

2

Add the following CSS properties to your div:

.sua-div {
    overflow: hidden;
    text-overflow: ellipsis;
}

Browser other questions tagged javascript html css mobile ux

You are not signed in. Login or sign up in order to post.