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

本文介绍了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属性。

在CSS中实现文本超出部分显示省略号(`text-overflow: ellipsis`)的同时让文本居中,需要注意几个关键点。首先,要确保文本容器具备适当的样式来支持文本的水平和垂直居中,同时还要保证当文本内容超出容器时能够正确显示省略号。 以下是实现该效果的一种常见方法: ### 使用 Flexbox 实现居中与省略号 Flexbox 是一种非常强大的布局工具,可以轻松实现元素的居中对齐,并且结合 `text-overflow: ellipsis` 可以很好地处理文本溢出问题。 ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 200px; /* 设置固定宽度或最大宽度 */ overflow: hidden; /* 防止文本溢出 */ white-space: nowrap; /* 禁止换 */ } .text { text-overflow: ellipsis; /* 超出部分显示省略号 */ } ``` ```html <div class="container"> <span class="text">这是一段很长的文本,可能会超出容器</span> </div> ``` 在这个例子中: - `.container` 使用了 `display: flex` 来启用 Flexbox 布局。 - `justify-content: center` 和 `align-items: center` 分别用于水平和垂直居中文本。 - `overflow: hidden` 确保文本不会溢出容器。 - `white-space: nowrap` 防止文本换,以便 `text-overflow: ellipsis` 正常工作。 - `.text` 上的 `text-overflow: ellipsis` 会在文本超出容器时显示省略号。 ### 使用 Inline-block 和伪元素实现居中与省略号 如果你希望使用更传统的方式而不依赖 Flexbox,也可以通过 `inline-block` 和伪元素来实现类似的效果。 ```css .block { text-align: center; /* 水平居中 */ line-height: 2em; /* 垂直居中,假设高度为 2em */ height: 2em; /* 固定高度 */ width: 200px; /* 固定宽度 */ overflow: hidden; /* 防止文本溢出 */ white-space: nowrap; /* 禁止换 */ } .centered { display: inline-block; vertical-align: middle; /* 垂直居中 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } ``` ```html <div class="block"> <span class="centered">这是一段很长的文本,可能会超出容器</span> </div> ``` 在这个例子中: - `.block` 使用 `text-align: center` 来实现水平居中。 - `line-height` 和 `height` 结合使用来实现垂直居中。 - `.centered` 使用 `display: inline-block` 和 `vertical-align: middle` 来进一步调整垂直对齐。 - `text-overflow: ellipsis` 在文本超出容器时显示省略号。 ### 注意事项 - **兼容性**:`text-overflow: ellipsis` 在大多数现代浏览器中都得到了良好的支持,但在一些旧版本浏览器中可能需要额外的处理。 - **多省略号**:如果需要支持多文本的省略号,可以使用 `-webkit-line-clamp` 属性,但这仅适用于 WebKit 浏览器(如 Chrome 和 Safari)。 ```css .multi-line { display: -webkit-box; -webkit-line-clamp: 2; /* 显示 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } ``` 这种方法虽然不能直接实现居中,但可以在某些特定场景下使用。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值