总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
box宽度有限，遇到单独的字符，就换行
如何解决呢？
1.强制换行：
设置：word-wrap: break-word;
word-wrap参数：
word-wrap: normal | break-word
break-word：即使没有空格和连接符，到box边缘了就换行
2.溢出隐藏，多出的文字打点
2.1单行打点
先设置强制不换行（中文会自动折行，不会超出）
然后将超出部分隐藏；
再设置打点效果
先看前两步：
www.baidu.com
强制不换行+超出截断+超出隐藏：
a {
display: inline-block;
width: 100px;
border:1px solid #000;
white-space: nowrap;/* 强制不换行 */
text-overflow: clip;/* 超出直接截断 */
overflow: hidden;/* 超出部分隐藏 */
}
运行效果：可以看到，超过的字符都没有换行，是直接截断的，并且超出部分隐藏
超出部分设置打点：
text-overflow: ellipsis;/* 超出部分打点 */
效果：
2.2 多行打点
文本超过两行就打点：
a {
display: inline-block;
width: 100px;
border:1px solid #000;
text-overflow: ellipsis;/* 超出部分打点 */
overflow: hidden;/* 超出部分隐藏 */
-webkit-line-clamp: 2;
display:-webkit-box;
/* 子元素被垂直排列 */
-webkit-box-orient: vertical;
}
效果：
可以看到，代码里用了很多前缀，说明用这个方法来实现多行打点的兼容性不太好，我们可以用js来实现
简单粗暴的方法：
估计一行最多可以容下的字符长度len；
判断a标签字符串长度，如果大于len，就截断并加上三个点
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/125837.html