Taro工作记录二如何实现文字溢出出现省略号

Posted 2022-01-02 前端大歌谣

目录

前言

需求

解决思路：

 总结

 结果

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

需求

今天我们公司领导找我 说这边有个需求需要你做一下 你的样式错位了

 

解决思路：

全文用了弹性布局 这个文字一多就会溢出了 这个时候就需要进行一个溢出处理

我们来看看处理的代码 最终结果

.myRight_content_header_left
        width:200px;
        text-overflow: ellipsis;
        white-space: nowrap;
       overflow: hidden;
        .myRight_content_header_left_text
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 40px;
     
        
        
      

 总结

要点1 需要用盒子包装样式

要点2text-overflow: ellipsis;white-space: nowrap;overflow: hidden;这段代码

 结果