Flex Label自动截取、自动换行

最新推荐文章于 2024-08-27 18:38:37 发布
最新推荐文章于 2024-08-27 18:38:37 发布
阅读量4.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Flex 文章标签： flex label自动截取 label自动换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/K_____WB/article/details/9342297
本文介绍如何通过配置label.maxDisplayedLines属性来控制文本标签内的文本显示方式，包括单行显示或多行显示及内容截断。

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

label.maxDisplayedLines=0;      // 默认多行显示，不截取
label.maxDisplayedLines=1;     //任意整数，显示单行文本，自动截取(...)
label.maxDisplayedLines=2;     //撑满label，可多行，显示不了的截取（...）
Flex3 label换行问题（这里使用as代码动态生成Lable）
01-21 5498
1、如果是在mxml里面明确知道有多长的字符串，如 label text=“用户名：”，使用“ \r\n ”。 2、如果在as里面明确知道字符串的长度，如var label:Label = new Label(); label.text="明确知道长度:",这里使用“ &#13“。 但是有一种情况，使用label展示平板消息，这样就不能明确text的长度，就会产生...的现实。 重写组件
全宇宙最深入的CSS3 姬成 渡一学习记录
m0_46424423的博客
07-21 1426
全宇宙最深入的CSS3 一、introduction 兼容性前缀 prefix（前缀） browser -webkit chrome/safari -moz firefox -ms IE -o opera 1.历史 更新迭代，兼容性 ---- 加不加前缀 div{ border-radius: ; -webkit-border-radius:; -o-border-radius:; -moz-border-radius:; } 兼容性手册
Flex Label自动截取、自动换行代码
10-27
Flex Label经常会使用到它的自动截取、自动换行代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
Flex4 Label文本换行
老卫的技术站
03-12 258
图标中的文本如果太长就显示不全了。查API ，Label继承了TextBase，而TextBase有maxDisplayedLines属性，表述如下：确定是否截断文本以及在何处截断文本的整数。 截断文本意味着使用截断指示符（如 "..."）替换超额文本。截断指示符与区域设置相关；它是由 "core" 资源包中的 "truncationIndicator" 资源指定的。 如果值为 0，则不会发生...
Flex中label换行
草根的理想
03-29 1743
LABEL 怎么自动换行啊？ myLabel.width=500 但是 由于内容太长  会被自动撑开，并且不会换行 l.mx_internal::getTextField().wordWrap = true;      [Bindable]    private var str:String  = "";    private function startTest():void
Flex中Label自动换行的处理方法
XIAOMENG_CN的专栏
05-28 1223
[Bindable]    private var str:String  = "";    private function startTest():void    {     l.mx_internal::getTextField().wordWrap = true;     str = "123456789123456789";    }      ]]>
12条有用的Flex代码
04-25
通过循环检查每个字符的Unicode编码，直到遇到非空白字符为止，然后返回截取后的字符串。 ### 9. 字符串右端空格去除 ```as public function RTrim(s:String):String { var i:Number = s.length - 1; while (s....
切换到查看所有时出现的问题，手机上显示不全然后图标变形了都，重新弄当我点击查看全部之后出现像图三那样的样式，柱状图用canvas弄出来，对下面的代码进行修改，只改动涉及到底哪个地方，其他的不要动，代码整体格式不变 <template> <view class="daily-details-container"> <!-- 学校及日期信息 --> <view class="school-info"> <view class="school-name-container"> <text class="school-name">{{ schoolName }}</text> <navigator url="/pages/allreport/reading-situation"> <text class="read-info" @click="viewReadInfo">阅读情况</text> </navigator> </view> <view class="date-info"> <text class="date-label">汇报日期</text> <text class="report-date">{{ reportDate }}</text> </view> </view> <view class="content-body"> <!-- 主标题 --> <view class="content-title"> {{ schoolName }}-{{ formatDate(reportDate) }}(周一) </view> <!-- 水表模块：仅折叠图片，备注和状态常驻 --> <view class="collapse-header1" @click="toggleCollapse1('waterMeter')"> <image class="icon" src="/static/water-meter-diagram.svg" mode="aspectFit"></image> <text class="collapse-title">水表图片</text> <image class="arrow" mode="aspectFit" :style="{ transform: showWaterMeterImages ? 'rotate(180deg)' : 'rotate(0deg)' }" src="/static/arrow-down.svg"></image> </view> <!-- 折叠内容：仅图片 --> <view class="collapse-content" v-show="showWaterMeterImages"> <view class="meter-images"> <image class="meter-img" v-for="(img, index) in meterImages" :key="index" :src="img" mode="aspectFill"></image> </view> </view> <!-- 日报图片模块 --> <view class="collapse-item"> <!-- 常驻内容：备注 + 状态 --> <view class="collapse-header2"> <view class="remark-label">水表备注</view> <view class="operation">{{ operationText }}</view> </view> <view class="collapse-header3" @click="toggleCollapse2('dailyReport')"> <image class="icon" src="/static/water-meter-diagram.svg" mode="aspectFit"></image> <text class="collapse-title">日报图片</text> <image class="arrow" mode="aspectFit" :style="{ transform: showDailyReportContent ? 'rotate(180deg)' : 'rotate(0deg)' }" src="/static/arrow-down.svg"></image> </view> <view class="collapse-content" v-show="showDailyReportContent"> <text>日报图片内容展示...</text> </view> </view> <!-- 历史总用量 --> <view class="usage-info"> <view class="usage-left"> <!-- 根据状态切换标题 --> <text class="usage-label">{{ viewAll ? '历史总用量' : '当日总用量' }}</text> <!-- 日期格式处理，根据需求调整，这里简单截取 --> <text class="usage-date">{{ viewAll ? reportDate.slice(0,0) : reportDate }}</text> </view> <view class="usage-center"> <!-- 根据状态切换展示的数据 --> <text class="usage-value">{{ viewAll ? ' ' : todayUsageData[0].value }}</text> </view> <view class="usage-right"> <button class="view-all" @click="toggleView"> <image :src="viewAll ? '/static/all-see.svg' : '/static/see-today.svg'" mode="widthFix" class="seeall" ></image> <text class="see">{{ viewAll ? '仅看当天' : '查看所有' }}</text> </button> <!-- 柱状图容器，根据状态控制显示 --> <view class="chart-container" v-show="viewAll"> <view class="chart"> <view v-for="(item, index) in usageData" :key="index" class="bar-wrapper" > <view class="bar" :style="{ height: `${item.height}%` }" > <text class="bar-value">{{ item.value }}</text> </view> <text class="bar-label">{{ item.label }}</text> </view> </view> </view> </view> </view> <!-- 水表数据表格 --> <view class="table-container"> <view class="table-header"> <text class="table-th">序号</text> <text class="table-th">水表</text> <text class="table-th">抄表数据</text> <text class="table-th">操作</text> </view> <view class="table-body"> <view class="table-tr" v-for="(item, index) in meterData" :key="index"> <text class="table-td">{{ index + 1 }}</text> <text class="table-td">{{ item.meterName }}</text> <text class="table-td">{{ item.readingData }}</text> <view class="history-btn" @click="viewHistory(item)"> <image src="/static/blue-arrow-down.svg" mode="" class="history-image"></image> <text class="see" >历史</text> </view> </view> </view> </view> <view class="pagination"> <image class="arrow arrow-left" src="/static/left.svg" mode="aspectFit"></image> <text class="page-info">{{ currentPage }}/{{ totalPages }}</text> <image class="arrow arrow-right" src="/static/right.svg" mode="aspectFit"></image> </view> <view class="end"> <text>日报备注</text> <text>今日抄表记录并分析用水情况，继续观察</text> </view> </view> </view> </template> <script setup> import { ref } from 'vue'; import { onLoad } from '@dcloudio/uni-app'; // 数据定义 const schoolName = ref('广西机电工程学校'); const reportDate = ref('2025-06-16'); const operationText = ref('继续观察'); const showWaterMeterImages = ref(false); const showDailyReportContent = ref(false); const viewAll = ref(true); // 初始显示"查看所有"状态 // 历史用量数据 const usageData = ref([ { value: '945', label: '6/10', height: 95 }, { value: '950', label: '6/11', height: 96 }, { value: '920', label: '6/12', height: 93 }, { value: '966', label: '6/13', height: 98 }, { value: '818', label: '6/14', height: 84 }, { value: '816', label: '6/15', height: 83 }, { value: '817', label: '6/16', height: 83 } // 添加当前日期数据 ]); // 当天用量数据 const todayUsageData = ref([ { value: '817', label: '6/16', height: 83 } ]); // 水表图片地址 const meterImages = ref([ '/static/all-see.svg', '/static/all-see.svg', '/static/meter3.png', '/static/meter4.png' ]); const meterData = ref([ { meterName: "市政表1", readingData: "552491" }, { meterName: "市政表2", readingData: "45972" }, { meterName: "市政表3", readingData: "6081" }, { meterName: "市政表4", readingData: "13947" } ]); const currentPage = ref(1); const totalPages = ref(1); // 页面加载逻辑 onLoad((options) => { if (options.schoolName) schoolName.value = decodeURIComponent(options.schoolName); if (options.reportDate) reportDate.value = options.reportDate; }); // 方法定义 const viewReadInfo = () => { uni.showToast({ title: "查看阅读情况功能待实现", icon: "none" }); }; // 切换折叠状态 const toggleCollapse1 = (type) => { if (type === "waterMeter") { showWaterMeterImages.value = !showWaterMeterImages.value; } }; const toggleCollapse2 = (type) => { if (type === "dailyReport") { showDailyReportContent.value = !showDailyReportContent.value; } }; const formatDate = (dateStr) => dateStr.split(' ')[0]; const viewHistory = (item) => { uni.showToast({ title: `查看${item.meterName}历史数据功能待实现`, icon: "none" }); }; // 切换查看模式 const toggleView = () => { viewAll.value = !viewAll.value; }; </script> <style scoped> /* 完整的CSS样式 (style scoped部分) */ .daily-details-container { padding: 15px; background-color: #f3f3f3; min-height: 100vh; } /* 顶部标题栏 */ .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 18rpx; } .page-title { font-size: 18px; font-weight: bold; color: #333; } .export-pdf { color: #007aff; font-size: 14px; } /* 学校信息模块 */ .school-info { margin-bottom: 15px; background-color: #fff; padding: 15px; border-radius: 16rpx; } .school-name-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .school-name { font-size: 20px; font-weight: bold; color: #333; } .read-info { color: #007aff; font-size: 16px; font-weight: bold; } .date-info { display: flex; justify-content: space-between; align-items: center; } .date-label { color: #999; font-size: 16px; margin-right: 5px; font-weight: normal; } .report-date { font-size: 16px; color: #111; font-weight: bold; } .content-body { background-color: #fff; border-radius: 15rpx; padding: 15px; } /* 主标题 */ .content-title { font-size: 16px; font-weight: bold; margin-bottom: 40rpx; color: #333; padding-bottom: 18px; border-bottom: 1px solid #f0f0f0; } /* 折叠模块通用样式 */ .collapse-item { margin-bottom: 15px; border-radius: 5px; overflow: hidden; border-bottom: 1rpx solid #eee; } .collapse-header1 { display: flex; align-items: center; padding: 10px 15px; background-color: #FFFFFF; border-radius: 4px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .collapse-header2 { display: block; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: #FFFFFF; border-radius: 4px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .collapse-header3 { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: #FFFFFF; border-radius: 4px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .icon { width: 20px; height: 20px; margin-right: 8px; } .collapse-title { flex: 1; font-size: 14px; color: #666666; font-weight: bold; } .arrow { width: 16px; height: 16px; color: #999999; transition: transform 0.3s ease; } /* 水表模块：常驻内容（备注 + 状态） */ .permanent-content { padding: 10px; background-color: #fff; border-bottom: 1px solid #eee; /* 与图片区分隔 */ } .remark-label { color: #999; font-size: 14px; margin-bottom: 15px; } .operation { font-size: 16px; font-weight: bold; color: #55aaff; margin-bottom: 30rpx; } /* 水表模块：折叠内容（仅图片） */ .collapse-content { padding: 10px; background-color: #fff; } .meter-images { display: flex; flex-wrap: wrap; justify-content: space-between; } .meter-img { width: 48%; margin-bottom: 10px; border-radius: 5px; } .usage-info { display: flex; align-items: center; background-color: #fff; border-radius: 8px; padding: 15px; margin: 20px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); border: 1rpx solid #F2F8FF; } .usage-left { flex: 1; display: flex; flex-direction: column; } .usage-label { font-size: 16px; color: #000; margin-bottom: 4px; font-weight: bold; } .usage-date { font-size: 14px; color: #666; } .usage-center { flex: 1; text-align: center; } .usage-value { font-size: 24px; font-weight: 500; color: #55aaff; } .usage-right { margin-left: auto; } .view-all { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 14px; color: #007AFF; background-color: #F2F8FF; border: 1px solid #007AFF; border-radius: 20px; line-height: 1.5; -webkit-appearance: none; appearance: none; } .seeall { width: 16px; height: 16px; display: inline-block; vertical-align: middle; } .see { vertical-align: middle; } /* 表格模块 */ .table-container { margin-top: 15px; border-radius: 10px; border-bottom: 1rpx solid #f5f5f5; background-color: #fff; } .table-header { display: flex; background-color: #f5f5f5; border-radius: 10rpx; } .table-th { flex: 1; text-align: center; padding: 10px; font-weight: bold; } .table-body { display: block; justify-content: space-between; } .table-tr { display: flex; margin-top: 20rpx; margin-bottom: 40rpx; } .table-td { flex: 1; text-align: center; padding: 0px; flex-basis: 0%; } .history-btn { flex: 1; text-align: center; font-size: 14px; color: #55aaff; border-radius: 20px; background-color: #dcf3ff; } .history-image { width: 12px; height: 12px; margin-right: 10rpx; vertical-align: middle; } .pagination { display: flex; align-items: center; justify-content: center; background-color: #FFFFFF; padding: 8px 16px; margin: 15px 0; } .page-info { margin: 0 1px; font-size: 16px; color: #333333; font-weight: normal; } .arrow { width: 24px; height: 24px; margin: 0 4px; opacity: 0.5; cursor: pointer; display: flex; align-items: center; justify-content: center; } .arrow-left { margin-left: 18px; background-color: #ccc; } .arrow-right { margin-right: 18px; background-color: #ccc; } .arrow:disabled { opacity: 0.3; cursor: not-allowed; } .end { padding: 10px; background-color: transparent; } .end text:first-child { font-size: 14px; color: #999; margin-top: 18px; margin-bottom: 18px; display: block; } .end text:last-child { font-size: 16px; color: #4A90E2; line-height: 1.5; font-weight: bold; } /* 新增：柱状图样式 */ .chart-container { padding: 10px; margin-top: 10px; width: 100%; overflow-x: auto; } .chart { display: flex; align-items: flex-end; height: 180px; min-width: 500px; /* 防止内容过窄 */ border-bottom: 1px solid #eee; border-left: 1px solid #eee; padding: 0 10px; box-sizing: border-box; } .bar-wrapper { display: flex; flex-direction: column; align-items: center; flex: 1; margin: 0 5px; } .bar { width: 20px; background-color: #55aaff; border-radius: 4px 4px 0 0; display: flex; justify-content: center; position: relative; transition: height 0.3s ease; } .bar-value { position: absolute; top: -20px; color: #333; font-size: 12px; font-weight: bold; } .bar-label { margin-top: 8px; font-size: 12px; color: #666; text-align: center; white-space: nowrap; } </style>
最新发布
06-19
- 弹性布局确保在不同屏幕尺寸正确换行 2. **Canvas优化**： - 根据设备像素比(`dpr`)调整画布分辨率，解决移动端模糊问题 - 动态计算容器尺寸，确保正确适配父元素 - 添加resize事件监听，实时响应窗口变化 3...
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2616
学习笔记
display:flex的情况下元素自动换行
Pashudeanan的专栏
12-17 2万+
display: flex; flex-wrap: wrap;
几种前端处理文本换行展示
weixin_47389477的博客
08-27 3584
在前端开发中，如何让文本换行的几种方式，看这一篇就够了
Css Flex 弹性布局中的换行与溢出处理方法
热门推荐
风清扬的专栏
10-02 2万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
flex中设置Label标签文字的自动换行
沈首二
06-09 1万+
<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><br /> <mx:Script><br />  <![CDATA[<br />      [Bindable]<br />   private var str:String  = "";<br />   private function startTest
使用display:flex或者float后子元素文本无法自动换行或字数过多父元素被撑开
lianzhang861的博客
05-29 1万+
当父元素设置display:flex后，子元素会自动布局并适应宽度，但里面的文本文字超出边界却无法自动换行 解决方法： .container2 .block .content1 p{ width:calc(100%);height:1.2rem;line-height:0.6rem; overflow:hidden;overflow-wrap: break-word; } ...
flex的label换行
zyn010101的专栏
05-10 165
在as中赋值 label.text="aaaaa \r\n bbbbbbb"在mxml中赋值 text="aaaaaa &amp;#13; bbbbbbb"
流式布局（简单来说就是自动换行）
qq_41698131的博客
06-12 3112
在很多的时候会用到流式布局，根据字面意思就是就像水流一样的布局，水流到了一行的尽头就要重新开始，在布局中添加的控件会根据每个子孩子，的宽高来布局，首先我们创建一个类，继承viewgroup,重写onLayout方法（根据onMeasure测量的宽高，进行布局摆放)onMeasure方法（用来测量子孩子的宽高）public class LiuShi extends ViewGroup { p...
Flex组件Button文本自动换行实现技巧
在Flex中创建自定义组件以实现特定布局和功能是一种常见的实践，尤其是在面对特定需求时，比如本文讨论的Button组件文本自动换行。在本知识点中，我们将深入探讨如何通过重载Button组件来实现文本自动换行的效果，为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值