ホームページ >ウェブフロントエンド >htmlチュートリアル >表の幅をテキストと変わらないように設定して固定_HTML/Xhtml_Webページ制作

表の幅をテキストと変わらないように設定して固定_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:38:521643ブラウズ

ページ上の表の幅を width="600px" に設定しても、幅が固定されないため、テキストが長すぎると折り返されず、表が変形します。

解決策:

1.table 幅を設定します。絶対幅と相対幅の両方を使用できます。

table-layout:fixed;
この属性を設定します。他のすべての td はすべて同じ幅です。

これを実行すると、表の幅は固定されますが、内部の記事が非常に長い場合はテキストで覆われてしまいます。

解決策:

スタイルを追加= in td word-wrap:break-word;" 単語を自動的に折り返します。行を折り返したくない場合は、余分な内容を非表示にして省略記号に置き換えることができます:

Add

コードをコピーしますコードは次のとおりです。
overflow:hidden; >white-space:nowrap;


text-overflow:ellipsis; (現在 IE8 でのみテストされています)
推奨される方法 (2013-11-14 by Zhang Lei) コンテンツを制御するために div を使用しますTD の

TD に追加

(1) 幅と高さを超えるテキストは自動的に非表示になります



コピーコードコードは次のとおりです:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa& lt;/div>


(2) td の幅が長さを超えた場合の自動行折り返しを設定する



コードをコピーしますコードは次のとおりです:
/td>

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。