css 解决当行文字超出隐藏，并且用省略号表示

最新推荐文章于 2024-08-23 11:10:08 发布

要成为光的女人

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/weixin_51614564/article/details/124612903

版权

html css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS（overflow, white-space, text-overflow）组合实现文字在限定宽度内的优雅显示，包括隐藏超出部分、保持不换行和省略号标识。通过实例演示了从初始效果到优化后的视觉变化和核心代码.

摘要由CSDN通过智能技术生成

1.起核心原理就是要给当前区域设置一个宽度，在利用css一些属性：

overflow: hidden 超出当前宽度隐藏

white-space: nowrap; 超出不换行

text-overflow: ellipsis; 超出省略号表示

最初的效果如下：

现在优化之后效果如下所示：

核心代码如下：

html:

<view class="the-winners-item">
<image></image>
<text>爱迪生造就灯泡</text>
</view>

css：

.the-winners-item {
  width:100rpx;
  display: flex;
  flex-direction: column;
  
}
.the-winners-item image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: pink;
}
.the-winners-item text{
font-size: 24rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}