1. 程式人生 > >html關於不換行代碼

html關於不換行代碼

user hidden span AS -a row src spl white

技術分享圖片

類似這種效果 這是基於a標簽 不是用table實現的

<a style="display: inline-block;white-space:nowrap;width: 100px;overflow:hidden;" href="">{{row.username}}</a>

以上就可以實現圖片效果

display: inline-block 將行內標簽屬性賦予塊級標簽 塊級標簽屬性賦予行內標簽 

white-space:nowrap  不換行
overflow:hidden    表示超過行會自動隱藏超過部分
text-overflow:ellipsis; 超出行寬度時顯示省略號 要和overflow:hidden一起使用

如果是table標簽
只需定義table{ table-layout:fixed;}

<a style="display: inline-block;white-space:nowrap;width: 100px;word-break:keep-all;overflow:hidden;" href="/cmdb/userdetail-{{row.id}}">{{row.username}}</a>

html關於不換行代碼