总记不住的一些前端小知识(持续更新)

365 阅读2分钟

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

一、各种省略号

1.单行文本,超出一定宽度时,显示省略号

样式部分
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进制,最后取整。