display: table; width: 100%;
将元素的display属性设置为table，它就可以像表格一样等宽排列了。但是这样存在一些缺陷，例如当文本内容的长度超过元素的宽度时，会出现溢出。所以大家需要用到另一个属性——word-wrap。
display: table; width: 100%; word-wrap: break-word;
设置了word-wrap为break-word后，文本内容当超过元素宽度时就会自动换行，不再出现水平溢出。
但是此时元素的边框和背景可能无法很好地显示。大家可以进一步设置元素的display属性为table-cell。这样它就会像表格单元格一样进行渲染，边框和背景也就能够正常显示了。
display: table-cell; width: 1%; /* 宽度设为1%表示单元格的宽度与内容宽度相同 */ padding: 5px; /* 设置内边距可以让文本内容离边框更近 */
这样就可以很好地实现让文本像表格一样等宽排列了。具体代码可以参照下面的例子：
<div class="table">
<p class="cell">文本1</p>
<p class="cell">文本2</p>
<p class="cell">文本3</p>
</div>.table {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 1%;
padding: 5px;
word-wrap: break-word;
border: 1px solid #ccc;
background-color: #f5f5f5;
}
</style>