Question

修改

1）以下问题仅发生在chrome中。（我编辑了标题）

2）我再次更新小提琴以更好地说明问题并显示在第二个范围内使用静态文本时 - 它会显示（甚至在chrome中）。

3）我需要限制动态文本的宽度（所以它不能有css显示：内联）

4）标题和名称有不同的样式（这就是我在标记中有2个跨度的原因）

5）Inspect元素向我显示文本在那里....但是由于某些奇怪的原因它没有显示。

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

我想制作一个带有2个文本元素的居中标题：

1）标题（静态文本）和

2）内容（动态文本）

我在内容上加了一个省略号，以确保它不会溢出框。

我的问题是我通过jquery设置的动态内容没有出现！

这是LIVE DEMO

我缺少什么？

这是标记：

<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

使用display

更改inline的值

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

example

修改

这是有效的，但我不知道为什么只有分配一个起始值，没有这个不起作用。

HTML：

<header class="header"> <span class="title">Hello</span>  ‎“<span id="Name" class="ellipsis name"></span>” ‎‎</header> <br><br><br><br><br> <button id="emptytext">empty text</button>   <button id="shorttext">short text</button>   <button id="largetext">large text</button>

JS：

$(function() { $('#Name').text('-'); $('#emptytext').on('click', function(event) { $('#Name').text(''); }); $('#shorttext').on('click', function(event) { $('#Name').text('Dan'); }); $('#largetext').on('click', function(event) { $('#Name').text('Recuerdo de constantinopla'); }); });

CSS：

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .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: 200px; vertical-align: top; /*for firefox*/ }

example ellipsis tutorial

Answer 2

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

从overflow: hidden;的CSS中移除.ellipsis并将其添加到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');
});

Answer 3

<击> 将其更改为：

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

<击>

但使用text也可以。

如果您只使用jsFiddle进行测试，则需要确保选择'jQuery'作为'no wrap（head）'的库，（其他选项也适用，因为您使用ready事件来调用该函数。）

检查更新的小提琴：

<击> http://jsfiddle.net/BuddhiP/UjnvW/3/ 新小提琴：http://jsfiddle.net/BuddhiP/UjnvW/6/

添加了jquery未在Chrome中显示的文字

3 个答案: