div中内容文字垂直居中、文字不换行显示省略号

原创于 2019-03-25 16:54:00 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS中实现文字垂直居中及水平居中的多种方法，并详细解释了如何让文本在溢出时显示省略号，适用于网页布局优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div中文字垂直居中

2、文字不换行，文本溢出显示省略标志

div中文字垂直居中

1、行高法

文字的行高和容器的高度相同，

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

2、内边距（padding）法

适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中

p { padding:20px 0; }

3、CSS3的transform来实现

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

4、水平居中简单

    text-align: center;

2、文字不换行，文本溢出显示省略标志

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

有时不起作用，这个时候看下div的width属性，设置一下width属性。