固定宽度容器中实现文本超过三行显示...的布局

一时失言乱红尘 2023-03-13 02:16 88阅读 0赞

###### *最新更新时间：2021年05月07日15:59:07* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：在固定宽度容器内，文本以预设的固定行数显示，如果超过设定的行数，以…结尾显示

#### 效果如下 ####

![在这里插入图片描述][20200509171206169.png]

#### 布局和样式 ####

<div className={styles.box}>
    	<div className={styles.text}>这个文本可能会很长，超过三行会以三个点显示。</div>
    </div>

.box { 
      width: 100%;
      background: #FF7662; .text { 
        width: 100px;
        background: #1eb895;
        font-size: 14px;
        overflow: hidden;/*超出的文本隐藏*/
        text-align: center;
        text-overflow: ellipsis;/*溢出用省略号显示*/
        display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 3;/*显示3行*/
        -webkit-box-orient: vertical;/*设置伸缩盒子的子元素排列方式 从上到下垂直排列子元素*/
      }
    }

#### webpack打包后`-webkit-box-orient`被移除的结局方案 ####

> 产生原因： package.json中的`autoprefixer`包自动移除了老式过时的代码

*  方案一：使用官网的控制注释(Control Comments)，块级多行语句方案，添加如下注释，关闭 autoprefixer

.text { 
    	/*! autoprefixer: off */
    	-webkit-box-orient: vertical;
    	/*! autoprefixer: on */
    }

> /\*! \*/ 注释开头叹号存在的意义，防止`postcss-loader`在处理css时会把非’!'开头的注释删除  
> 注意：如果有清除注释的插件，此时需要将该插件设为false

*  方案二：使用官网的控制注释(Control Comments)，单行语句方案，添加如下注释，关闭 autoprefixer

.text { 
    	/*! autoprefixer: ignore next */
    	-webkit-box-orient: vertical;
    }

*  方案三：内联样式

<div className={styles.box}>
    	<div className={styles.text} style={ {WebkitBoxOrient: 'vertical'}}>这个文本可能会很长</div>
    </div>

*  方案四：全局公共样式

<div className={styles.box}>
    	<div className={`${styles.textWrapThree} hehehe`}>这个文本可能会很长</div>
    </div>

/* base.css */
    .hehehe { 
    	-webkit-box-orient: vertical;
    }

*  方案五：修改 webpack 插件 optimize-css-assets-webpack-plugin 的配置

//修改 build/webpack.prod.conf.js
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    const webpackConfig = merge(baseWebpackConfig, { 
    	plugins: [
        	new OptimizeCssAssetsPlugin({ 
    		     cssProcessorOptions: { 
    		         safe: true,
    		         map: {  inline: false }, 
    		         autoprefixer: {  remove: false }
    			}
    		})
    	]
    })

#### 参考资料 ####

*  [css处理文字不换行、换行截断、溢出省略号][css]
 *  [autoprefixer - npm][]
 *  [Regression: -webkit-box-orient rules removed · Issue \#776 · postcss/autoprefixer · GitHub][Regression_ -webkit-box-orient rules removed _ Issue _776 _ postcss_autoprefixer _ GitHub]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[20200509171206169.png]: /images/20230312/1a191d79783b44d99bdd7019fcedef45.png
[css]: https://www.cnblogs.com/nanyang520/p/11358623.html
[autoprefixer - npm]: https://www.npmjs.com/package/autoprefixer
[Regression_ -webkit-box-orient rules removed _ Issue _776 _ postcss_autoprefixer _ GitHub]: https://github.com/postcss/autoprefixer/issues/776
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460