ホームページ > ウェブフロントエンド > htmlチュートリアル > 幅に合わせて自動的に折り返す方法?_html/css_WEB-ITnose

幅に合わせて自動的に折り返す方法?_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:08:59
オリジナル
1116 人が閲覧しました

<style>	#list {		width:200px;	}	#left {		float:left;		border:1px solid blue;	}	#right {		float:right;		word-break: break-all;		word-wrap: break-word;		/* 		有一前提不能写死width属性		因为像#block那块的#right宽度很明显与上面的不一致了		*/				border:1px solid red;	}	#block {		margin-left:60px;	}	.c {		clear:both;	}	</style>	<div id="list">		<div>			<div id="left">aaa</div>			<div id="right">dddddddddddddddddddddddddddd</div>			<div class="c"></div>		</div>		<div id="block">			<div id="left">aaa</div>			<div id="right">dddddddddddddddddddddddddddd</div>			<div class="c"></div>		</div>	</div>
ログイン後にコピー


上面有没css的解决方案?
用js来适应的话过于复杂了,因为可能套很多层、加上如很多要处理的话,一大批操作ie会吃不消。


回复讨论(解决方案)

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。
所以没办法把外层撑开只能word-break

这个是外面的没关系,

现在需要效果是里面的left 与right两块并列一行显示

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

引用 1 楼 zsx841021 的回复:

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

所以没办法把外层撑开只能word-break
它已经是自适应了。。

那需要left 与right两块并列一行显示,需要怎么写法?


引用 2 楼 zsx841021 的回复:

引用 1 楼 zsx841021 的回复:

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

所以没办法把外层撑开只能word-break

它已经是自适应了。。

<!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>    <title></title>    <style>                #right,#left        {            float: left;            border: 1px solid blue;            word-break: break-all;            word-wrap: break-word;        }       #right        {                        border: 1px solid red;        }        #block        {            margin-left: 60px;        }        .c        {            clear: both;        }    </style></head><body>    <div id="list">        <div>            <div id="left">                aaa</div>            <div id="right">                dddddddddddddddddddd</div>            <div class="c">            </div>        </div>        <div id="block">            <div id="left">                aaa</div>            <div id="right">                dddddddddddddddddddddddddddd</div>            <div class="c">            </div>        </div>    </div></body></html>
ログイン後にコピー

是这样的效果吗?。。最外层没有规定宽度。。

不是这样子呐~



如果没外层限制

根本不需要用这个了
word-break: break-all;
word-wrap: break-word;

也就没有需要自动换行之说了

HTML code



    </ti…… </p> <p class="sougouAnswer"> 不是这样子呐~ <br> <br> <br> <br> 如果没外层限制 <br> <br> 根本不需要用这个了 <br> word-break: break-all; <br> word-wrap: break-word; <br> <br> 也就没有需要自动换行之说了 <br> <br> 引用 6 楼 zsx841021 的回复: <br> <br> HTML code <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//…… <br> 如果限制最外层宽度。。。里层在超过的时候会被自动换行的。。要不然就用JS。。外层的宽度根据里层的宽度再改变。。但总觉得还是不行。。这样的话就等于没有设置外层宽度了。。 </p> <p class="sougouAnswer"> 这个是外面的没关系, <br> <br> 现在需要效果是里面的left 与right两块并列一行显示 <br> <br> 引用 1 楼 zsx841021 的回复: <br> <br> #list { <br> width:200px; <br> } <br> 由于你最外层已经限定了宽度。。。 <br> 这个你给最外层加个背景色就看出来了。。。 </p> <p class="sougouAnswer"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br> <html xmlns="http://www.w3.org/1999/xhtml"> <br> <head> <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br> <title>无标题文档



dsafsdfasdf


この問題は js で解決できますが、実際のアプリケーションには多くの層がある可能性があるため、多くの問題が発生します。


CSSを使って解決できればいいですね。この効果を実現するには、次のように #right width:100px; と記述するだけです。しかし、死ぬまで書くことはできません。



7階のci1699さんからの返信を引用:

そんなことないよ~



外側の制限がないなら

、これを使う必要は全くない
word-break:break- all;
word-wrap: Break -word;

自動的に行を折り返す必要はありません

6 階の zsx841021 からの返信を引用:

HTML コード

あなたも同じです




この問題は完全に解決されました。

ポスターのアバターがとてもかわいいので、ポスターが解決策を明らかにし、そこから学ぶことができることを願っています...

構造を最適化しました。階層化を行わないと、問題は単純になります。

jsを利用して公開処理すればIEが固まることもありません。


投稿しました

ポスターのアバターがとてもかわいいので、ポスターが解決策を明らかにし、そこから学ぶことができることを願っています...

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート