0

编辑

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

2）我再次更新了小提琴以更好地说明问题并表明当在第二个跨度中使用静态文本时 - 它确实会显示（即使在 chrome 中。）

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

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

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

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

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

1) 标题（静态文本）和

2）内容（动态文本）

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

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

这是一个现场演示

我错过了什么？

这是标记：

<header class="header">
    <span class="title">Hello</span>&nbsp;
    ‎“&lt;span id="Name" class="ellipsis name"></span>”
‎‎&lt;/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');
})​
4

3 回答 3

1

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

overflow: hidden;从 CSS for 中删除.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');
})​;​
于 2012-12-11T15:03:10.013 回答
1

改变displaywith的值inline

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

例子

编辑

这行得通，但我不知道为什么只有分配一个起始值，没有这个是行不通的。

HTML：

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

<br><br><br><br><br>

<button id="emptytext">empty text</button>&nbsp;&nbsp;
<button id="shorttext">short text</button>&nbsp;&nbsp;
<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*/
}
​

示例 省略号教程

于 2012-12-11T13:44:13.777 回答
0

将其更改为：

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

但是使用text也可以。

如果您仅使用 jsFiddle 进行测试，则需要确保选择“jQuery”作为“无包装（头部）”的库，（其他选项也可以，因为您使用准备好的事件来调用该函数。）

检查更新的小提琴：

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

于 2012-12-11T13:25:14.193 回答