换行

固定宽度前提下：

white-space: normal;

word-break:normal;

默认属性，超出容器保持原宽度

 

word-break:break-all;   (宽度不够截断)

只对英文起作用，以字母作为换行依据 

 

word-wrap:break-word;  

只对英文起作用，以单词作为换行依据 

 

white-space:nowrap;

强制不换行，都起作用 

 

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

不换行，超出部分隐藏且以省略号形式出现

 

扩展：js 角度实现 超出xx长度 显示省略号

   var str='abcdefghijklmn';
    var strCn='电饭锅地方大幅度发大幅度';
    console.log(subString(str, 8, '...'));
    console.log(subString(strCn, 2, 'xx'));
    function subString(str, len, replaceStr) {
      if (str == null || str == "") {
        return
      };
      var newLength = 0,
        newStr = "",
        chineseRegex = /[\u4e00-\u9fa5]/g,
        singleChar = "",
        strLength = str.replace(chineseRegex, "**").length;
      for (var i = 0; i <= strLength; i++) {
        singleChar = str.charAt(i).toString();
        if (singleChar.match(chineseRegex) != null) {
          newLength += 2;
        } else {
          newLength++;
        };
        if (newLength > len) {
          break;
        };
        newStr += singleChar;
      };
      if (strLength > len) {
        if (newStr.charAt(newStr.length - 1).match(chineseRegex) == null) {
          newStr = newStr.substring(0, newStr.length);
        };
        newStr += replaceStr;
      };
      return newStr;
    }

 

相关文章  overflow-wrap