1

私は Symfony2、Twig、および Twitter Bootstrap を使用しています。次の問題の解決策が見つかりませんでした。

Web アプリケーションの特定の部分で、(パーセンテージを使用して) 相対的に表示される表を使用しています。

長すぎて「予約済み」スペースに収まらないフィールドの値については、適切に収まるように文字列を切り捨てる Twig または Javascript 関数を使用しています。質問は：

表示された幅に応じてその切り捨ての長さを動的に設定する方法はありますか? テーブルは動的に表示され、ウィンドウのサイズ変更時にリセットされるため、これらの幅は外出先で変更されることに注意してください。

文字列を動的に切り捨てる方法はありますか?

私が使用しているコードの一部:

小枝：

<td>{{ p.name|truncate(50) }}</td>

ジャバスクリプト:

// Truncates a string and adds "..."
function truncate_string(str, len){
    if (str.length > len)
        return str.substring(0, len) + "...";
    else
        return str;
}

len解決策は、TD の幅と、結果として表示される文字列の幅に従って、そのパラメーターを動的に設定することです。

jQuery や CSS などを通じて、フォントのサイズと種類に応じた文字列の正確な幅を知っていますか? または、言い換えれば、ピクセル単位で特定の幅を持つことができる文字列の最大数をどのように知ることができますか?

4

2 に答える 2

2

小枝フィルターを拡張して独自のフィルターを作成したり、CSS スタイル / HTML を次のように編集したりできます

CSS :

table td{
    position:relative;
    overflow:hidden;
}
table td > span{
    display: inline-block;
    position:relative;
    height: 18px;
    min-width: 200px;
}

HTML :

<table>
<tr>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td> 
</tr>
<tr>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td>
    <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ante magna, non pretium sem. </span></td> 
</tr>

したがって、TD コンテンツは自動的にサイズ変更され、テキストを切り詰める必要はありません。

于 2012-11-07T21:08:26.107 に答える
1

あなたが求めていることを行うためのjQueryプラグインがあります。これは、javascript 以外では実現できません。overflowおそらく、CSS ウィザードは、およびafter属性を使用してソリューションを構築できる可能性があります。私の判断では、要素内のすべての文字列に固定文字列が追加されている場合にのみ機能します (文字列全体が表示されることはありません)。

関連するこの古いSO回答もチェックしてください。

于 2012-11-07T19:37:17.693 に答える