CODEWITHSUNDEEP
css
Neil
Neil

Reputation: 2902

How to increase width of a span tag inside an li

I have a ul with the following structure

<ul>
    <li> text goes here <span></span> </li>
    <li> text goes here <span></span> </li>
</ul>

Now initially the span tag is empty. Im trying to add a number into the span tag using the jQuery .html() function ,Works fine however in Chrome the text gets cut off. The strange thing is when i use the web inspector and click on the li the width of the span tag increase according to the content and the li too.

Any ideas ?

The css is as follows 

li{
    list-style:none;
    float:left;
    padding: 0 5px;
}

span{
    display:inline-block;
    min-width:5px;
    min-height:5px;
}

Upvotes: 1

Views: 3968

Answers (2)

Dexter Huinda
Dexter Huinda

Reputation: 1222

you can't. span is an inline element, either set it's display property to inline-block or block to set its dimensions, or use a block element instead of span.

white-space: nowrap; // will force it not to wrap around

See effect on this fiddle: http://jsfiddle.net/Abp8y/11/ [UPDATED].

Last diagnosis: text-transform bug caught in the li tag. Removing text-transform solves the problem.

The Chrome bug is also discussed here: text-transform: uppercase causes layout error on Chrome as posted by @Christoph

Upvotes: 3

Sandip Karanjekar
Sandip Karanjekar

Reputation: 850

Use can try this and fix the width of span-

span{
  word-wrap:break-word;
}

Upvotes: 0

Related Questions