幅に合わせて自動的に折り返す方法?_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 12:08:59

オリジナル

1108 人が閲覧しました

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

dsafsdfasdf

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

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

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

そんなことないよ~

外側の制限がないなら

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

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

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

HTML コード