Question

Edit

1) The following problem only occurs in chrome. (i edited the title)

2) I updated the fiddle again to illustrate the problem better and to show that when static text is used in the second span – it does get displayed (even in chrome.)

3) I need the limit the width of the dynamic text (so it can’t have css display: inline)

4) The title and the name have separate styles (that’s why I have 2 spans in the markup)

5) Inspect element shows me that the text is there…. but it is not displayed for some strange reason.

=============

I want to make a centered header with 2 text elements:

1) A title (static text) and

2) content (dynamic text)

I put an ellipsis on the content to ensure that it doesn’t overflow the box.

My problem is that the dynamic content – which i set through jquery isn’t showing up!

Here is a LIVE DEMO

What am i missing?

Here’s the markup:

<header class="header">
    <span class="title">Hello</span>&nbsp;
    ‎“<span id="Name" class="ellipsis name"></span>”
‎‎</header>​

CSS

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.header
{
    text-transform: uppercase;
    color: #952262;
    font: bold 24px arial;
    text-align: center;
    height: 45px;
    line-height: 45px;
    background-color: orange;
}

.title
{
    font-weight: normal;
}
.name
{
    display: inline-block;
    max-width: 370px;
    vertical-align: top; /*for firefox*/
}

jquery:

$(document).ready(function(){
   $('#Name').text('Dan');
})​

Answer 1

http://jsfiddle.net/ekFpk/1/

Remove overflow: hidden; from the CSS for .ellipsis and add it in document.ready:

$(document).ready(function(){
   $('#Name').text('The could be a long piece of text so I need to use an ellipsis here to trim it incase it overflows the container');
   $('.ellipsis').css('overflow','hidden');
})​;​