DIVテキストの非表示問題、解決してください~~_html/css

ディスカッションに返信 (解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIVテキストの非表示問題、解決してください~~_html/css_WEB-ITnose

Jun 21, 2016 am 09:40 AM

これは div です。最後の行をより美しく見せるにはどうすればよいですか? または、余分な単語を非表示にするか、または置き換えるにはどうすればよいですか?

ディスカッションに返信 (解決策)

style="overflow:hidden" を試してください

テキストの行の高さ = 画像の高さ / 表示する必要があるテキストの行数。

現在のスタイルを追加します: overflow:hidden;zoom1; ie6 と互換性があります

現在のスタイルを追加します: overflow:hidden;zoom:1;

これは div です。最後の行をより美しく見せるにはどうすればよいですか?追加する単語を非表示にするか、... に置き換えてください。専門家の指導を求めてください。
overflow:hidden; にはこの効果があります。つまり、一番下の行が非表示になります

現在のスタイルを追加します: overflow:hidden;zoom:1;
これは機能しません。。。

style="overflow:hidden"
overflow:hidden; を試して、この効果を取得します。つまり、一番下の行が非表示になります

効果を見て、DIV の高さを設定し、高さを削除する必要があります。トリック。最後の行の見栄えを良くしたい場合は、それにクラスまたは ID を追加し、色、サイズ、行の高さなどの属性を設定します。

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;自适应&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;*{	padding:0px;	margin:0px;}.fontcss{	width: 320px;	border-radius: 8px;	border: 2px solid #e0e7b8;	padding: 10px;		margin: 20px auto;}.fontcss p{	text-indent: 1em;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;fontcss&quot;&gt;	&lt;img src=&quot;1_epwqgdnbrh.jpg&quot; width=&quot;100&quot; height=&quot;100&quot; alt=&quot;火影&quot;  style=&quot;float: left;margin-right: 10px;&quot;/&gt;    &lt;p&gt;这是一个div，最后一行怎么让它显示得漂亮点啊，或者多出来的字隐藏掉或者用...替换，求高手指导啊！这是一个div，最后一行怎么让它显示得漂亮点啊，或者多出来的字隐藏掉或者用...替换，求高手指导啊！&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

これでテキストの折り返しが実現できます。ぜひご覧ください。お役に立てば幸いです

単純に美しく隠したい場合は、高さを行の高さで割り切れる必要があります

&lt;!DOCTYPE HTML&gt;&lt;html&gt;	&lt;head&gt;		&lt;meta charset=&quot;gbk&quot; /&gt;		&lt;title&gt;&lt;/title&gt;		&lt;style&gt;			div {				width:300px; height:100px;				border:1px solid red;				line-height:20px;				font-size:12px;				overflow:hidden;			}		&lt;/style&gt;			&lt;/head&gt;	&lt;body&gt;		&lt;div&gt;			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的			发生的健康放讲的是开发就的伤口附近的		&lt;/div&gt;	&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

このウェブサイトの声明

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