最近写业务，同时开发桌面端网页和 App webview 页面，经常被各种文字溢出和省略折磨不堪，每次都要翻一下 MDN 才明白。这里总结下关于换行和省略的所有 CSS 属性。
先来说一下在通常元素里，CSS 默认对文字的换行方式：
- 连续的空格会合并，html中输入N个连续的空格都会变成一个，除非用
占位；- 换行符会当作一个空格处理，文本的换行基于父元素宽度自动进行软换行；
- CJK（Chinese、Japanese、Korean）字符间可换行，非CJK字符（如英语），不在单词间断开，保持完整。
可以看到默认的处理方式，不能兼顾到所有的使用场景：有时候英语单词可以用连接线来在单词间断行，有时候又需要换行符保持原文的格式。因此 CSS 有许多属性来支持这些文本格式的处理。
我的博客网站最开始是使用 webpack 进行打包的，因为想要自学 webpack 配置就没去用 create-react-app，而是自己从零开始搭webpack。 结果是时间久了，不知道是新版webpack的问题还是其他配置的问题，启动越来越慢，甚至用公司的新电脑后，每次启动 server 直接卡死。 正好同事推荐学习一下 vite，于是决定改用 vite 来体验一下，结果没想到居然还有几个库也需要升级，适应 breaking-change
我从2021年5月开始实习，当时只会一点Vue和基础的js，结果到公司以后上手的就是typescript + React,着实让人难顶。有幸的是正因为开始学习 React 晚，因此上手就是函数式组件。在这几个月的实习中我对与React，函数式编程，typescript学习到了很多。
今天在作业中使用了webpack来打包前端项目，学习了如何使用webpack进行打包项目、运行dev serve。这里总结一下自己的学习成果。
计算机网络是计算机相关的重点知识之一，也是现在进行网络编程、网络通信的基础知识。我把自己学到的知识总结一遍，既当作复习，也当作交流，欢迎读者提出质疑和批判。
目 前一个需求：要求用户开启摄像头进行人脸验证，验证完成后再关闭摄像头进行提示。如何进行人脸识别，只需要上传视频到服务器就行，考虑处理如何使用用户摄像头并进行实时预览。
这里主要是使用 MediaStream 获取视频流，然后利用 video 标签显示视频获取内容。Javascript 代码如下：
//获取video节点
let video = document.getElementById("video")
const config = {
//指定摄像头画面尺寸，单位像素，也可以不指定具体大小，使用true表示使用
video:{ width:150, height:150 },
//不使用音频
audio:false
}
/*getUserMedia会返回一个Promise，如果用户允许使用，那么resolve回调MediaStream，否则reject抛出异常*/
navigator.mediaDevices.getUserMedia(config)
.then(MediaStream => {
video.srcObject = MediaStream
video.play() //指定视频源并播放
// 这里模拟识别成功，关闭摄像头，需要在MediaStream的Track里关闭掉我们使用的Track
setTimeout(()=>{
MediaStream.getVideoTracks()[0].stop() //只会有一个视频流
MediaStream.removeTrack(MediaStream.getVideoTracks()[0])
video.srcObject = null //srcObject恢复默认属性
},4000)
})
需要注意的是，目前很多文章只讲了如何调用摄像头而不讲如何关闭，或者关闭的方法也只有 removeTrack 甚至只有关闭 video，这种几乎是掩耳盗铃的行为，因为这样做只是断开了媒体流，硬件依然在工作。所以使用 MediaStream.getTracks()[].stop() 来关闭硬件。getTrack 返回所使用的 Track 列表，因此需要逐个关闭：
MediaStream.getTracks().forEach(track=>{
track.stop()
}
)
参考资料
MediaDevices.getUserMedia() - Web API | MDN
媒体流 (MediaStream) - Web API | MDN