CSS Width Property Not Getting Set

Question

I will try to explain myself as best I can because I really don't want to have to copy all the code over (there is a lot). I have a span which is getting text from an AngularJS binding (not important to this question) and I am setting four style parameters to this span:

A width: 100px
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

I am doing this based on the following W3Schools page: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

I want the text to be clipped at 100px and ellipsis added to the end of it. Here is a screenshot of what is going wrong:

The Google Chrome debugger computed style page for the container of the span

gvee · Accepted Answer · 2013-07-23 16:43:06Z

3

You can't apply a width to inline elements like that.

Example:

HTML

<span>1</span>
<span class="blocked">2</span>

CSS

span
{
    border: 1px solid red;
    width: 300px;
}

span.blocked
{
    display: block;
}

JSFiddle

http://jsfiddle.net/sygap/

answered Jul 23, 2013 at 16:43

gvee

17.2k42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nigh7Sh4de Over a year ago

You, my friend, are a lifesaver! Question: how do you know this? I really want to get better at JS, CSS, etc.

gvee Over a year ago

How do I know this? I've made this mistake many a time! Practice, practice and more practice.

Collectives™ on Stack Overflow

CSS Width Property Not Getting Set

1 Answer 1

HTML

CSS

JSFiddle

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

JSFiddle

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related