一、核心代码

注意：text-overflow 必须要搭配 white-space 才能生效

overflow: hidden; /* 文字溢出隐藏 */
white-space: nowrap; /* 文字强制文字不换行，也就是一行显示 */
text-overflow: ellipsis; /* 溢出文字省略号代替 */

二、演示代码

<view><view style="height: 100rpx;background-color: rgb(255, 153, 0);"></view><!-- 核心盒子 --><view class="csAbnormalityBox"><view>呆呆的夏天，置身于风灌满两袖的青石小径上，忽然想起曾经。在树影婆娑打晃的午后， 长藤爬满记忆的围墙，故事很长，却不知从何开场。</view><view style="height: 80rpx;"></view><view class="titleBox">呆呆的夏天，置身于风灌满两袖的青石小径上，忽然想起曾经。在树影婆娑打晃的午后， 长藤爬满记忆的围墙，故事很长，却不知从何开场。</view></view><!-- 核心盒子 -end --><view style="height: 100rpx;background-color: rgb(76, 0, 255);"></view>
</view>// css
.csAbnormalityBox{height: 300rpx;padding: 40rpx 0;
}
.titleBox {overflow: hidden; /* 文字溢出隐藏 */white-space: nowrap; /* 文字强制文字不换行，也就是一行显示 */text-overflow: ellipsis; /* 溢出文字省略号代替 */
}

三、导致BUG（微信小程序端）

微信小程序存在问题

强制一行显示出现这种问题

解决方案两种

1.外层嵌套view

右侧内容过多的情况下兼容性问题有点多建议采用第二种，

例子右侧只有一个view，过多的view建议采用第二种方案

2.外层view包裹 + 定位，（强烈推荐）

具体实现是，左侧盒子logo图片之类的可以给一个view包裹，

给左侧盒子图片宽高大小的view，固定定位在item盒子左侧

整体的item盒子给一个左侧 padding-left：（照片宽度）

右侧盒子可以做display: flex;布局等功能，

方案2的好处是兼容性好，右侧盒子内容多的时候建议采用第二种兼容性写法，

第一种写法：

第二种写法：

CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug相关推荐

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序常用CSS总结
前言本人之前自学并发版了一个微信小程序(TXT音乐播放器),趁着还没忘,把常用的一些CSS样式总结在下方.微信小程序使用的css文件后缀为wcss,总的来说,与html中的css语法大致相同,但还是 ...
不用写一行代码，就能用ivx制作一个“微信小程序“，超牛逼
今天需要为大家介绍一款神器ivx. 它是通用无代码开发平台,是面向新一代全栈开发人员的通过不编写代码的方式实现快速开发的软件开发平台,提供图形化逻辑编排编程语言.抽象组件.集成开发环境等能力,能够支持 ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
微信小程序 1rpx border ios 真机显示不全
微信小程序 1rpx border ios 真机显示不全问题描述在微信小程序的原生页面,ios 真机上 1rpx border 会出现个别边显示不全的情况: 解决方案这里先放上问题直通车:微信小 ...

CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug

一、核心代码

二、演示代码

三、导致BUG（微信小程序端）

第一种写法：

第二种写法：

CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug相关推荐

最新文章

热门文章