0

テーブルにコンテンツを含むテーブル行を動的に挿入するスクリプトを作成しました。問題は、セル内でタグ<span>とタグを使用して、複数の章のエントリを表示することです。<a>ビューポートが小さすぎる場合、新しい行に分割する代わりに、要素がセルをオーバーフローするだけで、作成者名でカバーされます。

スクリーンキャプ

ウェブサイトリンク: http://hunpony.hu/hunfic/

挿入される動的 HTML (例):

<span class="chapter-list">
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/prologus" target="_blank" data-hasqtip="true" oldtitle="Prológus" title="">Pr</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/i" target="_blank" data-hasqtip="true" oldtitle="1. fejezet" title="">1</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/ii" target="_blank" data-hasqtip="true" oldtitle="2. fejezet" title="">2</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/iii" target="_blank" data-hasqtip="true" oldtitle="3. fejezet" title="">3</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/iv" target="_blank" data-hasqtip="true" oldtitle="4. fejezet" title="">4</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/v" target="_blank" data-hasqtip="true" oldtitle="5. fejezet" title="">5</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/vi" target="_blank" data-hasqtip="true" oldtitle="6. fejezet" title="">6</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/vii" target="_blank" data-hasqtip="true" oldtitle="7. fejezet" title="">7</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/viii" target="_blank" data-hasqtip="true" oldtitle="8. fejezet" title="">8</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/epilogus" target="_blank" data-hasqtip="true" oldtitle="Epilógus" title="">Ep</a>
    <a href="https://sites.google.com/site/ponydocs/home/nite/eljonek-az-unnepek/elmulnak-az-unnepek" target="_blank" data-hasqtip="true" oldtitle="Utószó" title="">Usz</a>
</span>

いくつかの CSS ルール:

td.title .chapter-list {
    list-style:none;
    padding:0;
    margin:0;
    font-variant: small-caps;
    white-space: nowrap;
    padding-right:0;
}
td.title .chapter-list:before { content: "(fejezetek: "  }
td.title .chapter-list:after { content: ")"  }
td.title .chapter-list a {
    white-space: nowrap;
    margin:0px 3px;
    padding-bottom:0;
}
td.title .chapter-list a:after { content:", " }
td.title .chapter-list a:last-child:after { content: "" !important }
4

1 に答える 1

2

私はfirebugでこれをチェックしました。white-space: nowrap;forを削除して代わりにこれtd.title .chapter-listをtd.title .chapter-list a 追加

td.title .chapter-list,
td.title .chapter-list a
{
white-space: normal;
}
于 2013-04-03T20:12:58.150 に答える