適用場景
當螢幕解析度為320x500時模組標題效果如下：實現方式方案一： demo當螢幕解析度為480x500時模組標題效果如下：
也就是當螢幕解析度大時顯示的文字多，解析度小時顯示文字少，同時需要保證這一部分始終完全顯示。
來自@蔣軒哲
為整個容器和標題文字容器新增 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 保證內容在一行內顯示。效果如下，我們需要顯示的**標識同時也被省略掉了，這時我們接著改進
為標題文字容器新增 display:inline-block;max-width:100%;設定容器最大寬度為100%，這時我們發現**標識被擠到了下面
為**標識容器新增 display:inline-block;margin-left:-6em; 通過設定負margin讓我們**標識可以出顯示在標題行裡
為標題文字容器接著新增 padding-right:6em;box-sizing:border-box; 通過設定box-sizing屬性值為border-box，把padding-right值占用的位置計算到了標題文字容器裡，注意：padding- right的值正好是**標識容器margin-left的調整的值。調整完後的效果如下：
最後我們調整一下標題文字容器和**標識容器的垂直對齊方式讓它們垂直居中對齊
方案二：demo
來自@guopi
為標題容器新增 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
最後我們調整一下對齊方式讓內容在整個容器中垂直居中對齊
方案三：demo
來自@snadn
為標題容器新增
display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:top;
這裡我們提前把垂直居中對齊設定好了。
為又整個容器新增white-space:nowrap; 把內容控制成一行顯示
接著為又整個容器新增margin-right:100px;把標題內容限制在一定的寬度內，好讓**標識顯示出來。
在上面的效果中發現灰色背景也同時被限制在了一定的寬度內，所以我們把背景的設定提出來放在整個容器上，最終效果如下：
方案四：demo 來自@snadn
為標題容器新增 display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% – 100px);
最後我們調整一下對齊方式讓內容在整個容器中垂直居中對齊
總結:方案一和方案三對於不同解析度下的截斷效果比較統一
方案二在不同解析度下有些差異，比如解析度較大時內容會截斷的多一些，解析度小時內容又會截斷的少一些
方案四在移動端的相容性不是很好慎用。
CSS實現多行文字截斷
簡歷大家自然都有，這裡我要說的是如果要找海外的工作，最好在linkedin上維護乙份詳細的英文簡歷，不管你是否打算在linkedin上投簡歷，這都是很有用的。首先，很多公司在投簡歷的時候不要你傳送的pdf簡歷，而是要求你在它自己的 上填寫一堆資訊 簡歷大家自然都有，這裡我要說的是如果要找海外的工作，...
移動端實現專案
method post enctype multipart form data type file class pic id img name pic1 type button class btn id tp 選擇 class sub type submit id sub type button d...
PHP實現中文字元的無亂碼截斷
php內建的substr 函式不能對中文字元進行很好的截斷處理，對於一些中英文混合的字元會出現亂碼的情況。下面提供兩種解決函式。1 gb2312編碼方式的截斷 php function msubstr str,start,len else tmpstr substr str,i,1 return t...