0

編集

1）次の問題はクロムでのみ発生します。（タイトルを編集しました）

2）問題をよりよく説明し、静的テキストが2番目のスパンで使用されると表示されることを示すためにフィドルを再度更新しました（クロムでも）。

3）動的テキストの幅を制限する必要があります（したがって、cssを表示することはできません：インライン）

4）タイトルと名前のスタイルが異なります（マークアップに2つのスパンがあるのはそのためです）

5）Inspect要素は、テキストがそこにあることを示していますが、奇妙な理由で表示されません。

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

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

の値を変更しdisplayます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 に答える
1

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');
})​;​
于 2012-12-11T15:03:10.013 に答える
0

次のように変更します。

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

しかし、使用するtextこともできます。

jsFiddleのみでテストしている場合は、「no wrap（head）」のライブラリとして「jQuery」が選択されていることを確認する必要があります（readyイベントを使用して関数を呼び出すため、他のオプションも機能します）。

更新されたフィドルを確認します。

http://jsfiddle.net/BuddhiP/UjnvW/3/ 新しいフィドル： http： //jsfiddle.net/BuddhiP/UjnvW/6/

于 2012-12-11T13:25:14.193 に答える