39

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

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

これは内部クライアント アプリケーション用であるため、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>
4

7 に答える 7

37

テーブル自体の幅を修正し、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 でテストしたところ、問題なく動作するようです。

于 2009-01-15T13:21:52.773 に答える
21

長いテキストを改行で適切にラップしたい場合は、テーブル id 呼び出しで css プロパティを使用します。table-layout:fixed;そうしないと、単に css が長いテキストを新しい行に分割できません。

于 2011-04-28T07:07:12.113 に答える
17

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

于 2009-01-15T13:05:27.580 に答える
12

これを試して：

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;
于 2012-07-21T12:32:38.183 に答える
3 
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>
于 2015-06-01T12:14:41.677 に答える
2

IE6/7 のソリューションが必要だったことは承知していますが、他の人のためにこれを投げ出しています。

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

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
于 2013-03-18T17:10:51.127 に答える
-7

試すtd {background-color:white}

前のコラムの長いテキストに踏みにじられたくないコラムでうまくいきました。

于 2009-04-14T08:55:54.833 に答える