Geek Answers Handbook

The text inside the HTML element is too long

So my questions are similar to the following:

crop too much text inside div

What I do not want to do is the complex end of the text (interrupting any text overflow).

The desired result will not include ellipses (...), but will “disappear”. Therefore, if I had something like:

<div class="text">This is the really long area of text that I want to chop</div>

then, wherever I decide, say, halfway ... n will be half-damped, and t will almost disappear. Of course, positioning is random and may fall acroos 3 or 4 letters ...

Here are the acceptable solutions in order of preference.

  • Is it possible to fade text only with css?
  • If this is not possible using another element in div.text, can I accomplish what I want (can the clouding disappear?).
  • Do it with jQuery? (pah ... not recommended)
+7
jquery html css xhtml
source share
2 answers

Assuming your page background is white: make a gif with transitions from transparent to white (left to right). Put this on the right side of the div. Your text will fade to white.

This is similar to the way shadows are created.

Edited to add:

I should have answered your list items right away.

  • No, it is impossible to blur text only with CSS, unless you execute it by character; but it is almost impossible to control in different browsers and screen resolutions.

  • Precipitation does not disappear.

  • I don't know about the jQuery object that does this, but I haven't used it much.

+7
source share

Your decision 2. is really possible. You just need to use an absolutely positioned element with a linear gradient, from white to transparent.

No need for image.

You can look at http://css-tricks.com/text-fade-read-more/

+7
source share

More articles:


All Articles