Uni-app ＜text＞标签自带行高

已于 2022-08-06 14:49:32 修改
阅读量1.6k 收藏
点赞数 1
分类专栏： uni-app 文章标签： 前端 css html
于 2022-08-06 14:49:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nllkjlk/article/details/126194572
版权

使用uni-app的<text>标签时，无论如何设置行高都无法生效

方式一：为<text>标签的外层嵌套一层<view>，并设置<view>标签的行高。
方式二：设置父级元素 display:flex;属性。
方式三：text标签增加display:block;

但是：当我们设置了以上方式的任意一种时，结果可以看到文本标签始终要比设置的高度大一点
下方图片设置了行高为20px

请添加图片描述
问：会不会对其他文本产生影响？

从实际使用情况来看这个额外的高度并没有影响，放心使用即可

nllkjlk
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app textarea auto-height 文字出现上下滚动
w候人兮猗
08-04 9046
前言 帮一个可爱的小姐姐改一个uni-app构建的微信小程序时，在使用textarea组件时遇到的一点小问题。 描述问题：在uni-app中,<textarea>的auto-hetght属性会出现高度不够，文字能够上下移动的问题,具体见下图: 当输入的文字过多时,textarea内的文字可以上下滚动。 这不属于产品的需求，产品要的是输入框高度随着文字的变化而变化不能出现滚动条，而...
uni-app table表格
10-26
uni-app 表格示例 no-bad-table
uniapp text标签自带行高
weixin_53096550的博客
02-25 3976
字行高一直很大，line height不能继续缩小，后查阅资料知uniapp text标签自带行高，通过增加display:block；解决。
uniApp使用textarea,默认高度且文字多后自适应设置
最新发布
weixin_45395283的博客
04-10 1495
【代码】uniApp使用textarea,默认高度且文字多后自适应设置。
CoreText获取text的行高
More reading and learning to become excellent
09-27 1140
步骤1：创建NSAttributedString NSMutableAttributedString *attString = [[NSMutableAttributedString alloc] initWithString:@"iOS程序在启动时会创建一个主线程，而在一个线程只能执行一件事情，如果在主线程执行某些耗时操作，例如加载网络图片，下载资源文件等会阻塞主线程（导致界面卡死，无法...
实现uniapp两个text标签一行显示
全栈工程师
04-21 2946
此时我们只需在的外层div添加display: inline-block即可实现，文本显示在一行。背景，uniapp自带的标签默认是不在一行的，需要实现一行显示。通过查看computed，发现是一个display属性造成的。
uni-app常用标签详解
m0_74831742的博客
06-17 5799
view>
react-dynamic-virtual-scroll:虚拟滚动实现动态行高
05-02
动态动态虚拟滚动 React组件可用于在任何页面上实现虚拟滚动，而无需担心动态项目的高度。... < VirtualScroll xss=removed xss=removed xss=removed xss=removed xss=removed> { return ( < div className = "L
tinyMCE富文本编辑器line-height行高插件
10-12
5. **自定义行高值**：如果默认的行高选项不能满足需求，你还可以通过插件的配置来添加自定义的行高值。例如，你可以在初始化配置中添加： ```javascript lineheight_values: '1em 1.5em 2em 3em', // 添加自定义...
Dreamweaver网页设计
05-27
形考任务二 活动1：采用CSS样式来设置背景、标题和段落的颜色。 ... <html> <head> </head> ...<body> ...</body> ...</html> ...<html> ...<head> ...</head> ...<body> ...这是拥有标准行高的段落。...<style type="text/css"> body {backgr
Liberation-Mono-High：带有增加的行高的Liberation Mono字体家族的版本
02-05
Liberation-Mono-High：带有增加的行高的Liberation Mono字体家族的版本
uni-app之使用text文本组件教学
码奴一只猿
06-09 4316
UniApp是一个基于Vue.js的跨平台应用开发框架，它允许开发者使用一套代码构建同时运行在多个平台（如iOS、Android、Web等）上的应用程序。在UniApp中，Text组件是用于显示静态文本内容的基本组件。本教学指南将详细介绍UniApp中Text组件的用法，并提供示例代码，帮助你快速上手。
Uniapp中固定高度，文字超出部分，隐藏并用省略号代替
骨子里的偏爱
12-07 1669
Uniapp中固定高度，文字超出部分，隐藏并用省略号代替
uni-app中text文本组件的基本使用
Acapplella的博客
07-27 3507
text文本组件的用法 001 - text 组件的属性 属性 类型 默认值 必填 说明 selectable boolean false 否 文本是否可选 space string . 否 显示连续空格，可选参数：ensp、emsp、nbsp decode boolean false 否 是否解码 text 组件相当于行内标签、在同一行显示 除了文本节点以外的其他...
uniapp如何判断文本超出某行
csdn_chengpeng的博客
03-27 1112
此处需要获取节点元素的高度，所以必须要在mounted中去写。
uni-app:常见组件view、text、icon
weixin_46001736的博客
07-18 1540
根据html：可知div是块级标签，span是行级标签。这里view类似于div，text类似于span，即。两个view，分别位于第二排、第三排。两个icon图标，置于第一排。行级标签：text、icon。两个text，置于第四排。
uniapp如何应对不同端字体大小的问题
qq_41304029的博客
06-13 3925
可以使用postcss-pxtorem插件将css中的px单位自动转换为rem单位，再在html的样式表中设置基准字体大小。具体而言，对于常见的1倍设备像素比，1个设备像素对应1个实际像素；而对于2倍设备像素比，1个设备像素对应4个实际像素；对于3倍设备像素比，1个设备像素对应9个实际像素。相比较rem和px的适配方案，使用vw和vh单位还需要更加细致的计算。通过设置不同的vw和vh值，可以在不同尺寸的设备上适应字体大小。针对不同设备像素比，需要设置不同的字体大小。3.基于设备像素比设置字体大小。
前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色
chenchuang0128的博客
06-02 2688
tagListOne:['标签一','标签二','标签三','标签四','标签五','标签六','标签七','标签八','标签九','标签十', '标签十一','标签十二','标签十三','标签十四','标签十五','标签十六','标签十七','标签十八','标签十九','标签二十','标签二十一','标签二十二','标签二十三','标签二十四']-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 color:文字颜色 bgColor:背景颜色 -->
uniapp动态设置占位区高度（配合createSelectorQuery方法）
qq_43351090的博客
07-19 898
需求top-box区域为fixed布局，固定的。此时需要一个配套的占位区域，来占住top-box的位置，以防止内容区域挤压。
<text>标签怎么设置行边距
06-06
可以通过设置CSS样式来设置<text>标签的行边距。具体方法如下： 1. 在<head>标签中添加<style>标签，定义样式： ```html <style> text { line-height: 1.5; /* 设置行高为1.5倍字体大小 */ margin-top: 10px; /* 设置文本上方的边距为10像素 */ margin-bottom: 10px; /* 设置文本下方的边距为10像素 */ } </style> ``` 2. 在<text>标签中添加class属性，引用定义好的样式： ```html <text class="my-text">这是一段文本</text> ``` 这样就可以设置<text>标签的行边距了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值