一、各种省略号
二、断词断句
三、parseInt不规律解密
一、各种省略号

样式部分
div {
background-color: orange;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
标签部分
<div>1.此段文字用来测试'超200px长度时,显示省略号'</div>
2.单行文本,超出一定长度时,显示省略号
用函数实现,函数返回值为处理后的字符串
/**
参数解释
@str 原始字符串
@len 最大的长度,超出的部分显示为省略号
*/
function limitedLength(str, len) {
return str.length > len ? (str.slice(0, len) + '...') : (str)
}
const str = '2.此段文字用来测试,单行字符串,超出24个字符后,显示省略号';
const len = 24;
const getString = limitedLength(str, len);
document.body.append(getString);
3.多行文本,超出一定行数时,显示省略号
样式部分
p {
background-color: skyblue;
width: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 超出3行时,显示省略号
overflow: hidden;
}
标签部分
<p>3.此段文字用来测试'多行文本,超出3行行数时,显示省略号'</p>
二、断词断句
1.段落中的文本不进行换行

样式部分
p.white-space {
white-space: nowrap
}
标签部分
<p class="white-space">
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
2.允许长单词换行到下一行

样式部分
p.word-wrap {
width:135px;
border:1px solid #000000;
word-wrap:break-word;
}
标签部分
<p class="word-wrap">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
3.允许在单词内换行

样式部分
p.work-break {
word-break:break-all;
width:135px;
border:1px solid #000000;
}
标签部分
<p class="work-break">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
parseInt不规律解密
语法 parseInt(string, radix);
/ **
参数解释
@string 字符串(如果入参不是字符串,则自动转成字符串)
@radix 进制基数(介于2和36之间的整数)
*/

规律如下:
1.如果是数字,则将整个数值按照进制转成10进制数字后,再转成科学计数法,然后取整。
2.如果是字符串,则从前到后,在进制范围内的片段作为整体拿出来,用进制解析后,转成10进制,最后取整。