Question

CSS如何设置自适应宽度自动换行

如图，代码如下，请问还需要作什么操作？
<div id="choise">
<ul id="gzyydm_c">
<li dataValue=Y01:元件遗失><a href=#>元件遗失</a></li>
<li dataValue=Y12:元件断路><a href=#>元件断路</a></li>
<li dataValue=Y13:元件短路><a href=#>元件短路</a></li>
<li dataValue=Y14:软件错误><a href=#>软件错误</a></li>
<li dataValue=Y15:人为损坏><a href=#>人为损坏</a></li>
<li dataValue=Y99:其它><a href=#>其它</a></li>
</ul>
</div>
#choise ul {
list-style-type:none;
padding:0px;
margin:0px;
}
#choise ul li {
float:left;
display:inline;
margin-right:5px;
width:auto;
overflow:hidden;
}
#choise ul li a {
display:block;
border:1px solid #a0b8cf;
padding:2px 4px 2px 4px;
margin:3px 1px 6px 1px;
}

Answer 1

在固定宽度的条件下，只要加上word-wrap:break-word; word-break:break-all;这行 代码，就能起到换行左右。如：

<div style="width:80px; height:180px; background:#FF0000;"><p style="word-wrap:break-word; word-break:break-all;">afasdfjaklsdfjalkdjfalsdfjal;sjdfasdfjal;sfj</p></div>

效果

Answer 2

#choise ul li a {
display:block;
border:1px solid #a0b8cf;
padding:2px 4px 2px 4px;
margin:3px 1px 6px 1px;
}
改为
#choise ul li a {
display:block;
border:1px solid #a0b8cf;
padding:2px 4px 2px 4px;
margin:3px 1px 6px 1px;
word-break:keep-all;
white-space:nowrap;
}
这样应该就可以了