CODEWITHSUNDEEP
javascriptjquerycss
Sunny
Sunny

Reputation: 10075

How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then

$(div).css('width':'50px');

should not impact the display of EFGHIJ, for example.

Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?

Thanks

Upvotes: 0

Views: 863

Answers (2)

j08691
j08691

Reputation: 207891

One solution is to use a wrapper and CSS positioning:

jsFiddle example

<div id="outer">
    <div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
    position:relative;
    overflow:hidden;
    border:1px solid #999;
    width:50px;
    height:20px;
}
#inner {
    position:absolute;
    right:0;
}

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.

and also to hide the letters, you should mention overflow: hidden and some width to the container.

Working Fiddle

Upvotes: 1

Related Questions