css樣式、js2種方式 控制字符個數，多余的字用省略號代替

大家好，我是小菜 前端 ，技術不高，正在努力中充電!希望大家多多指教：css

<div class="show">大家好，我是小菜 前端 ，技術不高，正在努力中充電!希望大家多多指教</div>

　　

.show{
width:50px;
padding:5px;
overflow:hidden; //隱藏
white-space:nowrap; //文本不進行換行
word-break: keep-all;  //中英文不斷詞
word-wrap: normal;    //保持默認處理
text-overflow: ellipsis;  //顯示省略符號來代表被修剪的文本
-o-text-overflow: ellipsis;
}

 js：

<td class="fyhoverflow">a15666山西省臨汾市侯馬市櫻花縣 </td>

 

$(document).ready(function() {
                //限制字符個數
                $(".fyhoverflow").each(function() {
                    var maxwidth = 10;
                    if ($(this).text().length > maxwidth) {
                        $(this).text($(this).text().substring(0, maxwidth));
                        $(this).html($(this).html() + '...');
                    }
                });
            });