做聊天的對(duì)話框的時(shí)候霉翔，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)一個(gè)bug，發(fā)送文字過(guò)長(zhǎng)會(huì)導(dǎo)致 <span>標(biāo)簽內(nèi)容溢出柒凉，出來(lái)的效果會(huì)產(chǎn)生 <span>標(biāo)簽重疊在一起族阅。
而使用 <div>可以在內(nèi)容過(guò)長(zhǎng)時(shí)自動(dòng)換行，而且不會(huì)堆疊在一起膝捞，即把 <div>容器撐大坦刀。
但是又產(chǎn)生了一個(gè)問(wèn)題：內(nèi)容過(guò)短時(shí) <div>的寬度還是按最大的百分比來(lái)的，這樣會(huì)造成文字很少蔬咬，但是對(duì)話框背景框卻頂?shù)阶顚捔恕?/p>
要實(shí)現(xiàn)的效果是對(duì)話框根據(jù)文字長(zhǎng)度自動(dòng)變長(zhǎng)變短求泰，并且有一個(gè)最大寬度，即 max-width屬性保證不變的過(guò)寬而不好看了计盒。
后來(lái)嘗試了 <label>渴频，居然完美的實(shí)現(xiàn)了效果。既有隨著文字自動(dòng)撐大容器寬度北启，又能實(shí)現(xiàn)達(dá)到一定寬度換行卜朗，完美的實(shí)現(xiàn)了想要的效果拔第。
網(wǎng)上查了下， <label>是用于表單綁定 <input>標(biāo)簽的场钉，即通過(guò) for屬性來(lái)綁定對(duì)應(yīng) <input>的 id蚊俺，點(diǎn)擊label會(huì)觸發(fā)相應(yīng)的 <input>標(biāo)簽點(diǎn)擊事件。
所以想了想逛万，應(yīng)該跟 <label>這個(gè)標(biāo)簽的功能屬性無(wú)關(guān)泳猬，因?yàn)樗皇窃O(shè)計(jì)用來(lái)承載文本內(nèi)容的，不像 <p> 和<span>宇植。
最后果斷想到得封， <label>既有 <div>的自動(dòng)換行的效果，又有 <span>自動(dòng)撐大容器的效果指郁，那應(yīng)該是內(nèi)聯(lián)塊元素忙上，即 display:inline-block。很可能是這個(gè)屬性在起作用闲坎。
所以果斷把 <span>加上display:inline-block疫粥，成功實(shí)現(xiàn)了想要的效果。
但又有一個(gè)問(wèn)題腰懂，純連續(xù)字母和數(shù)字不會(huì)換行梗逮，最后加上word-wrap: break-word強(qiáng)制自動(dòng)換行搞定。
word-break: break-all會(huì)當(dāng)文本達(dá)到寬度就強(qiáng)制換行绣溜，而不管單詞有沒(méi)有完整顯示慷彤，不推薦使用。比如consulate只顯示cons就截?cái)嗔虽毯痢６?code>word-wrap: break-word會(huì)把consulate直接換到下一行顯示
