前端记录

js实现换行

当自带的遇到空格即换行机制不太友好时，我们需要人为的去控制换行，但同时又想兼顾如果一行放得下则放一行，一行放不下时，部分值换行。
举例 展示 time：13: 00，May 22，如果用自动换行机制，很有可能22单独成一行，这样用户体验很不好。但如果是 time：13: 00，May 5，可能一行就放的下，所以现在需要js处理。思想：父div内再写一层子span，因为span具有内容多长，展示就多长的特性，然后比较div和span的宽度，如果div宽度长，则一行展示，如果span宽度长，则分两行展示

代码如下：
index.html

<div className="test">
          {isChangeLine ? (
            <div className="time">
              <div className="est">计划:</div>
              <div className="date">13:00 May 22</div>
            </div>
          ) : (
          <div className="time">
            <span className="est">计划: 13:00 May 22</span>
          </div>
          )}
</div>

js

const ele1 = document.querySelector('.time')
const ele2 = document.querySelector('.est')
 if(ele1 && ele2) {
   if(ele1.offsetWidth < ele2.offsetWidth) {
     this.setState({
       isChangeLine: true
     })
   }
 }

css随意写，只要不给div和span设置white-space: normal即可