1.16 尺寸

最大、最小设置后,文本会超出显示,

height 高

<p style="height: 60px;line-height: 30px;background-color: yellow;overflow:hidden;">
    设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;
</p>

<p style="line-height: 30px;min-height: 30px;background-color: yellow;" >
    设置元素的最小高度;
</p>

<p style="line-height: 30px;max-height: 90px;background-color: yellow;overflow:hidden">
    设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;设置元素的最大高度;
</p>

width 宽

同 height,略;

特殊

  • 设置显示 2 行文本,截断末尾添加 ...,多余不显示;
<p style="height: 60px;line-height: 30px;background-color: yellow;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
    设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;设置元素的高度;
</p>