web-dev-qa-db-ja.com

テーブルのセル幅-固定幅、長い単語の折り返し/切り捨て

さまざまな長さのテキストを含むセルを含むテーブルがあります。すべてのテーブルセルが同じ幅であることが重要です。これが長い単語の切り捨てや長い単語の区切りの強制を意味する場合、それは問題ありません。

これを機能させる方法はわかりません。

これは内部クライアントアプリケーション用であるため、IE6およびIE7でのみ動作する必要があります。

サンプルページは次のとおりです。 onereallylongwordを含むセルが問題のセルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>Word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>
htmlcssuser-interfacehtml-table
37
Richard Everett

スタックオーバーフローは、DIVを使用し、overflow-x:auto。 CSSは言葉を分解することはできません。

17
Diodeus - James MacFarlane

テーブル自体の幅を修正し、table-layoutプロパティを設定する限り、これは非常に簡単です：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="2">
        <tr>
            <td>Word</td>
            <td>two words</td>
            <td>onereallylongword</td>

        </tr>
    </table>
</body>
</html>

IE6と7でこれをテストしましたが、うまくいくようです。

35
inferis

長いテキストを新しい行で適切にラップする場合は、テーブルID呼び出しでcssプロパティtable-layout:fixed;それ以外の場合、単にcssは新しい行の長いテキストを分割できません。

20
Katie

これを試して：

text-overflow: Ellipsis; 
overflow: hidden; 
white-space:nowrap;
10
Anupam

IE6/7のソリューションが必要であることがわかりましたが、私はこれを他の誰かに捨てているだけです。

table-layout: fixedを使用できず、IE <9を気にしない場合、これはすべてのブラウザで機能します。

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
2
shrimpwagon
<style type="text/css">
td { Word-wrap: break-Word;max-width:50px; }            
</style>
2
Mukund