html – CSS – 包装优先级

概述我有一个有3列的表 *********************************************************** Name * Description * Actions ************************************************************ John 我有一个有3列的表

***********************************************************  name        *     Description               * Actions ************************************************************  John        * Lorem ipsum bla bla etc eetc  *   B1    **              *                               *   B2    ***********************************************************

会发生什么是最后一列首先包装其内容,然后是描述列.我想首先包装Description列.
我尝试添加white-space：nowrap但是Actions列永远不会包装.

浏览器如何确定要包装的列？

我希望第3列成为最后一个包装.因此,在描述列完全包装之前,它应该在一行上显示按钮.当柱子没有更多的空间时,可以包裹.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/CSS/bootstrap.min.CSS');

<table >  <thead>    <tr>      <th>Entity</th>      <th>ID</th>      <th>Description</th>      <th>Actions</th>    </tr>  </thead>  <tbody>    <tr>      <td>Customer</td>      <td>9004</td>      <td>null,asdjkajk,kkkjk,kjkk,kkk,898989</td>      <td>        <button >          <span ></span>        </button>        <button >          <span ></span>        </button>      </td>    </tr>  </tbody></table>

解决方法 列在表中按降序包装文本.
所以你只需要修改最后一列的宽度.

如果你想让它在小屏幕中再次换行,只需添加一个媒体查询(参见CSS)将它的宽度重置为auto,并给columng优先包装.

table{  wIDth:300px;}td{  border:1px solID black;}table>tr>td:last-child{  wIDth:40px;}@media (max-wIDth: 200px) {  table>tr>td:last-child{    wIDth:auto;  }}

<table>  <tr>    <td>Col1</td>    <td >Description</td>    <td>Actions</td>  </tr>  <tr>    <td>John</td>    <td >Lorem ipsum bla bla black test long text</td>    <td>BA AB</td>  </tr></table>

总结

以上是内存溢出为你收集整理的html – CSS – 包装优先级全部内容，希望文章能够帮你解决html – CSS – 包装优先级所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。