商品展示的文字排版渲染

商品展示中的文字排版

像这种排版 就需要注意 商品的标题文字不是固定的

1. 标题的文字可能回超过两行
2. 标题的文字可能只有一行

这些都需要处理

首先是 文本超过两行显示胜略号

.text-twoLine {
     
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
   overflow: hidden;
}

加上这些 css样式就可实现 文本超两行显示胜略号了

文本足两行

如果文本不足行 且 下面的价格用的是 margin-top 的话 就会出现价格会往上移了一段 看着会很难看
这个时候 推荐用 flex布局

<div class="value">
	<!-- 标题 -->
	<div class="title">阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</div>
	<!-- 价格 -->
	<div class="price">￥<span>119</span></div>
</div>

<style>
	.value {
     
		// flex布局
		display: flex;
		// 切换主轴方向 为从上往下
		flex-direction：column
		// 两边对齐
		justify-content: space-between;
	}
</style>

这样就可以 使标题跟价格 两边对齐了