text-overflow: ellipsis不生效的几种情况（记录一下）

最新推荐文章于 2025-05-06 00:00:54 发布
原创 最新推荐文章于 2025-05-06 00:00:54 发布 · 2.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #微信小程序

当text-overflow:ellipsis不起作用时，可能是因为缺少固定宽度或者容器使用了flex布局。要解决此问题，可以确保容器有固定宽度，并在使用flex布局时，将ellipsis应用于内嵌的块级元素。

text-overflow: ellipsis不生效的几种情况
正常的写法：

.firstLineEllipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}
不生效的原因和解决办法：

1.没有给容器添加固定宽度
2.容器不可以是flex布局，若要使用flex布局，可以用flex布局的父元素包裹

文章原文：text-overflow: ellipsis不生效的几种情况_猫丞丞和兔飞飞~的博客-CSDN博客

文字过长使用省略号展示，text-overflow 的使用和不生效场景的解决办法，flex 布局中文字省略展示的坑
有一棵树的博客
04-25 2000
文字过长使用省略号展示，text-overflow 的使用和不生效场景的解决办法，flex 布局中文字省略展示的坑
JS如何判断文字是否溢出（被ellipsis）？
weixin_45821809的博客
10-10 4560
JS如何判断文字被ellipsis了？
CSS---text-overflow: ellipsis无效问题
JamieCheung的专栏
08-31 4155
.groupNickname { width: 1.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 必须配合overflow: hidden; 和 white-space: nowrap;使用才有效。
文本溢出解决text-overflow: ellipsis；不生效的问题
高性价比服务器就选：蓝易云
03-14 4194
如果以上都无法解决问题，可能需要检查是否有其他CSS规则覆盖了你的样式，或者浏览器是否支持。用于隐藏超出元素宽度的内容，
text-overflow:ellipsis失效
Mahuicool的博客
04-26 1307
text-overflow:ellipses用于设置文本超出显示‘…’，工作中遇到设置不上的问题，所以总结一下。
解决text-overflow: ellipsis；不生效的问题
热门推荐
张晨光老师的播客
03-21 8万+
按照text-overflow: ellipsis;使用规则，在标签样式中添加该属性未生效，例如：写道.text {text-overflow: ellipsis;}<div class="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div> 之后，发现并没有达到我们想要的预期效果，其实还需要另外2个...
（已解决）text-overflow: ellipsis； 不生效 问题
qq_68469751的博客
08-16 3001
text-overflow: ellipsis； 不生效 问题...............
text-overflow: ellipsis不生效的几种情况
gufeifei_的博客
02-26 4907
text-overflow: ellipsis不生效的几种情况 正常的写法： .firstLineEllipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } 没有给容器添加固定宽度 容器不可以是flex布局，若要使用flex布局，可以用flex布局的父元素包裹 ...
text-overflow: ellipsis; 的使用
06-27
在 CSS 中，`text-overflow: ellipsis` 是一种常用于处理文本溢出的样式属性。它可以在内容超出容器宽度时显示省略号（...），从而提升用户界面的美观性与可读性。以下是使用 `text-overflow: ellipsis` 的具体方法...
<view class="todo-info"> <text class="todo-user">{{ item.procTitle +'-'+item.procInitiatorName+'-'+getTime(item.arriveTime) }}{{ item.procTitle +'-'+item.procInitiatorName+'-'+getTime(item.arriveTime) }}{{ item.procTitle +'-'+item.procInitiatorName+'-'+getTime(item.arriveTime) }}</text> </view> .todo-info { font-size: 12px; color: #999999; display: flex; align-items: center; overflow: hidden; .todo-user { margin-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }不生效
09-10
` 不生效时，可能有以下几种原因及对应的解决办法： ### 父容器宽度问题 如果父容器没有明确的宽度限制，内容可能会一直延伸而不会溢出，导致省略号不显示。可以给父容器设置一个固定宽度或者最大宽度。 #### 示例...
CSS省略号text-overflow超出溢出显示省略号
12-04
`text-overflow`属性有以下几个关键点： 1. **语法结构**： `text-overflow`的语法是：`text-overflow : clip | ellipsis;` - `clip`：默认值，不显示省略标记，而是简单地裁剪超出的内容。 - `ellipsis`：当...
<template> <!-- 品牌馆 --> <view class="outBox"> <s-layout title="" navbar="inner"> <view class="brand"> <view class="brand-header" :style="{ backgroundImage: `url('${headerImg}')` }"> <view class="header-box1 flex jus-con center column"> <image class="box1-img" :src="headerTitle"></image> <view class="box1-text">严选品牌好货</view> </view> <view class="main-search flex center"> <image :src="headerSearch" class="search-icon" @click="searchInfoClick"></image> <view class="search-input flex center"> <input class="uni-input" placeholder="请输入品牌名称查找搜索" :value="inputClearValue" @input="clearInput" placeholder-style="color: #baaf9fc9;" /> <uni-icons type="clear" color="#dbdbdb" size="26" v-if="showClearIcon" @click="clearIcon" ></uni-icons> </view> <view class="search-text flex center jus-con" @click="searchInfoClick">搜索</view> </view> </view> <view class="brand-main"> <view class="main-nav flex"> <!-- <view class="inner-box" v-for="(item, index) in mainNavTitle" :key="index" @click="qiehuanNav(index)" :class="item.inline ? 'innerBoxActive' : ''" > {{ item.title }} </view> --> <SuTab v-model="activeTab" :tab="mainNavTitle" scroll :titleStyle="{ activeBg: '#734c2f', activeColor: '#FFF', color: '#fee4bf' }" @change="handleTabChange" /> </view> <view class="main-content"> <scroll-view scroll-y @scroll="handleScrollClick" style="height: 60vh"> <view class="content-box" v-for="value in 4"> <view class="conBox-title flex center"> <view class="title-left flex center"> <image class="leftImg" src="#"></image> <view class="leftText-box"> <view class="box-text1">良品铺子官方旗舰店</view> <view class="tuike flex center"> <view class="pinpai">品牌自营</view> <view>推客专享</view> </view> </view> </view> <view class="title-right flex center jus-con"> <view class="right-text1">进店</view> <uni-icons type="right" size="14" color="#fff"></uni-icons> </view> </view> <view class="conBox-swiper"> <swiper class="swiper flex" circular :autoplay="autoplay" :interval="interval" :duration="duration" > <swiper-item class="swiper-item" v-for="item in 4"> <view class="item-inner"> <image src="#" class="inner-img"></image> <view class="inner-text flex column"> <view class="inner-top">【良品铺子】猪肉脯肉干高蛋白肉脯靖江特...</view> <view class="inner-bottom"> <view class="bottom-textBox1 flex center"> <view class="textBox1-money">￥</view> <view>39.90</view> </view> <view class="flex center"> <view class="bottom-textBox2">预估返</view> <view class="bottom-textBox3">￥3.20</view> </view> </view> </view> </view> </swiper-item> </swiper> </view> </view> </scroll-view> </view> </view> </view> </s-layout> </view> </template> <script setup> import { ref } from 'vue'; import SuTab from '../../sheep/ui/su-tab/su-tab.vue'; const headerImg = ref('/static/img/brand/header-bg.png'); const headerTitle = ref('/static/img/brand/header-title.png'); const headerSearch = ref('/static/img/brand/search.png'); const inputClearValue = ref(''); const showClearIcon = ref(false); const clearInput = (e) => { inputClearValue.value = e.detail.value; if (e.detail.value.length > 0) { showClearIcon.value = true; } else { showClearIcon.value = false; } }; const clearIcon = () => { inputClearValue.value = ''; showClearIcon.value = false; }; const searchInfoClick = () => { console.log('点击了搜索'); }; const currentNavIndex = ref(null); const mainNavTitle = ref([ { title: '全部', inline: true }, { title: '个护清洁', inline: false }, { title: '美食饮品', inline: false }, { title: '服装配饰', inline: false }, { title: '运动', inline: false }, ]); // 标签切换回调 const activeTab = ref(0); const handleTabChange = (e) => { console.log('选中标签索引：', e.index, '标签数据：', e.data); currentNavIndex.value = e.index; }; const handleScrollClick = () => { console.log('滚动'); }; const qiehuanNav = (val) => { mainNavTitle.value.forEach((item) => { item.inline = false; }); mainNavTitle.value[val].inline = true; }; </script> <style lang="scss" scoped> .outBox { width: 100%; height: 100vh; overflow: hidden; position: relative; .flex { display: flex; } .center { align-items: center; } .jus-con { justify-content: center; } .column { flex-direction: column; } :deep(.page-body) { width: 100%; height: 99.7vh; background: #230a00 !important; } .brand { height: 88.5vh; .brand-header { width: 750rpx; height: 800rpx; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: 100% 100%; .header-box1 { width: 424rpx; height: 190rpx; margin: 190rpx 162rpx 0 164rpx; .box1-img { width: 100%; height: 136rpx; object-fit: cover; } .box1-text { font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 32rpx; color: #fee4bf; text-align: left; font-style: normal; text-transform: none; margin-top: -30rpx; } } .main-search { width: 694rpx; height: 56rpx; border-radius: 36rpx; margin: 95rpx 28rpx 0; border: 1px solid #fee4bfb3; .search-icon { width: 36rpx; height: 36rpx; margin: 18rpx 0rpx 18rpx 42rpx; } .search-input { width: 62vw; height: 44rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #666666; text-align: left; font-style: normal; text-transform: none; margin: 0 16rpx; .uni-input { width: 100%; height: 100%; color: #baaf9f; } } .search-text { width: 136rpx; height: 100%; border-radius: 36rpx; background-color: #fff2e0; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #ff9600; text-align: left; font-style: normal; text-transform: none; } } } .brand-main { position: absolute; top: 560rpx; left: 28rpx; // z-index: 1; height: 65vh; .main-nav { width: 95.4vw; height: 56rpx; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; :deep(.ui-tab.ui-tab-scrolls .ui-tab-scroll-warp .ui-tab-scroll) { line-height: 0 !important; } :deep(.ui-tab-item) { padding: 0rpx 1rpx !important; } :deep(.ui-tab-item .ui-tab-text) { margin-right: 16rpx; padding: 8rpx 24rpx; box-sizing: border-box; border-radius: 70rpx; background-color: #562c1599; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #fee4bf; text-align: center; font-style: normal; text-transform: none; } // .inner-box { // margin-right: 16rpx; // padding: 8rpx 24rpx; // box-sizing: border-box; // border-radius: 70rpx; // margin-right: 16rpx; // background-color: #562c1599; // font-family: PingFang SC, PingFang SC; // font-weight: 400; // font-size: 28rpx; // color: #fee4bf; // text-align: center; // font-style: normal; // text-transform: none; // } // .innerBoxActive { // color: #ffffff; // background-color: #734c2f; // } } .main-content { margin-top: 20rpx; margin-bottom: 16rpx; height: 60vh; overflow-y: auto; .content-box { width: 694rpx; height: auto; border-radius: 32rpx; background-color: #fde3be; padding: 32rpx 0 32rpx 32rpx; box-sizing: border-box; margin-bottom: 32rpx; .conBox-title { margin-bottom: 30rpx; margin-right: 32rpx; justify-content: space-between; .title-left { .leftImg { width: 96rpx; height: 96rpx; object-fit: cover; border-radius: 50%; border: 1px solid red; margin-right: 8rpx; } .leftText-box { .box-text1 { font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 32rpx; color: #000000; text-align: center; font-style: normal; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 300rpx; margin-bottom: 8rpx; } .tuike { font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #734c2f; text-align: center; font-style: normal; text-transform: none; .pinpai { margin-right: 8rpx; } } } } .title-right { width: 130rpx; height: 56rpx; border-radius: 28rpx; background: #734c2f; margin-top: 20rpx; .right-text1 { margin-right: 2rpx; margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #ffffff; text-align: left; font-style: normal; text-transform: none; } } } .conBox-swiper { height: 372rpx; .swiper { height: 100%; overflow: hidden; .swiper-item { width: 236rpx !important; height: 100%; .item-inner { margin-right: 16rpx; width: 220rpx; height: 100%; border-radius: 16rpx; .inner-img { border-radius: 16rpx 16rpx 0 0; width: 220rpx; height: 220rpx; object-fit: cover; background-color: pink; } .inner-text { padding: 4rpx 12rpx 8rpx 10rpx; box-sizing: border-box; justify-content: space-between; background-color: #fff; margin-top: -8rpx; height: 142rpx; border-radius: 0 0 16rpx 16rpx; .inner-top { width: 100%; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 20rpx; color: #333333; text-align: left; font-style: normal; text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .inner-bottom { margin-top: 8rpx; .bottom-textBox1 { font-family: PingFang SC, PingFang SC; font-weight: 600; font-size: 20rpx; color: #f00403; text-align: left; font-style: normal; text-transform: none; .textBox1-money { margin-top: 5rpx; } } .bottom-textBox2 { padding: 4rpx; box-sizing: border-box; border-radius: 8rpx; background-color: #fe294c; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 16rpx; color: #ffffff; text-align: left; font-style: normal; text-transform: none; } .bottom-textBox3 { width: 67rpx; height: 28rpx; background: #ffe5e9; border-radius: 8rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 20rpx; color: #fe294c; text-align: left; font-style: normal; text-transform: none; } } } } } } } } } } } } </style> 为什么中间的 SuTab的滚动为什么不生效vue3小程序uniapp
最新发布
09-26
针对SuTab组件滚动不生效的问题，我们可以从以下几个方面排查： 1. **样式问题**：小程序的样式作用域可能与H5不同，深度选择器可能无效。需要检查是否因为样式导致滚动区域高度不足。 2. **组件注册方式**：...
HoRain云--本溢出解决text-overflow: ellipsis；不生效的问题
sinat_57153473的博客
04-18 1141
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。如果仍不生效，建议提供具体 HTML/CSS 代码片段进一步分析。❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！删除无关 CSS 代码，逐步添加必要属性，定位冲突样式。通过以上步骤，99% 的。
解决text-overflow: ellipsis;不生效的问题
wanlic2008的博客
10-31 3238
        按照text-overflow: ellipsis;使用规则，在标签样式中添加该属性未生效，例如： 写道 .text { text-overflow: ellipsis;}&lt;div class="text"&gt;长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字&lt;/div&gt;          之后，发现并没有达到我们想要...
【CSS问题】解决 text-overflow: ellipsis 不生效的问题
佚名程序员
11-04 3096
在现代网页设计中，是一个常用的 CSS 属性，主要用于处理文本溢出问题。当文本内容超出其容器时，能够以省略号的形式进行友好的展示。然而，很多开发者在使用时却会遇到不生效的情况。本文将详细探讨该问题的原因及解决方案，希望能帮助到遇到相同困惑的朋友。属性用于指定当文本溢出其容器时的显示方式。配合overflow和属性使用，能够在文本内容超出边界时，显示省略号（…），让用户清楚地知道还有更多内容未显示。使用条件容器必须有固定宽度：容器需要设置明确的宽度，以便确定文本溢出的条件。overflow属性必须设为。
蓝易云 - 文本溢出解决text-overflow: ellipsis；不生效的问题
高性价比服务器就选：蓝易云
05-06 600
如果以上都无法解决问题，可能需要检查是否有其他CSS规则覆盖了你的样式，或者浏览器是否支持。：元素必须有一个明确的宽度（或max-width），否则浏览器无法知道何时开始截断文本。：如果文本被包在嵌套元素中，需要确保。用于隐藏超出元素宽度的内容，应用在直接包含文本的元素上。
CSS text-overflow: ellipsis；不生效的问题
LlanyW的专栏
03-02 655
根据要求，width, text-overflow,white-space,overflow这几个字段都配置了，最后检查发现是.box4里还有一层p标签，把p标签去掉就可以了。添加了：ellipsis。
text-overflow: ellipsis 不生效的情况
ourring的博客
05-25 424
原因是加了display：flex；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值