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() + '...');
                    }
                });
            });