CODEWITHSUNDEEP
jquerytruncate
Cress
Cress

Reputation: 65

white spaces when using truncate text plugin

Am attempting to apply jtruncate plugin seperately to each of 4 text areas on same page. First text area alignment is justified, rest are right aligned.

Have left comment on the jtruncate plugin blog but heard nothing yet.

My issues are...

A) The justified text bit, on second and subsequent reveals, text doesnt properly justify leaving a massive white space along the top line, bookended by the first two words.

B) On the right aligned text bits, on second and subsequent reveals, the first word of the top line wont jump back up to top line, staying at the front of the bottom line of text. Where it should be, at the beginning of the top line, (top left), there is a white space left.

Hard to explain so...

...I've cobbled together a short jsfiddle which should show what I mean on all 3 counts. Can you assist?

I am VERY new to jQuery and coding in general, often I dont undertand coding terminology or instruction, so please explain things in simple terms for me :)

Upvotes: 1

Views: 321

Answers (2)

Cress
Cress

Reputation: 65

I sorted it! its due to animation starting a new line. Should have scrutinised the text on the plugin blog ~ a salutary lesson.

I managed to work around the problem, by adding a kind of subtitle in my html, which wasn't an H1 H2 etc but simply bold text.

Then I spent hours tooling around with empty P tags, line breaks & white-space: pre-wrap; until I got what I wanted. It took a while, but it works fine now!

Thanks for all the help folks, you inspired me to not give up.

Upvotes: 0

Hogan
Hogan

Reputation: 70538

I've looked some more and for the first part (statement text) you can make the following change to the CSS

#statement .truncate_more
{
    text-align:justify;
    float: right;
}

Which solves the problem.

http://jsfiddle.net/QLgqe/

Update:

Looked at it some more. The "change" after the first time is because you are starting with an element that has no display set, setting it to none and then setting it to block. If you start with it in block you will see no change from one display to the next. With this you should be able to adjust the rest of your style sheets to work however you want them to work.

Here is the fiddle

http://jsfiddle.net/QLgqe/1/

Upvotes: 1

Related Questions