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

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

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

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

效果如下

布局和样式

<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处理文字不换行、换行截断、溢出省略号
• autoprefixer - npm
• Regression: -webkit-box-orient rules removed · Issue #776 · postcss/autoprefixer · GitHub

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

打赏我吧^-^