UNIAPP NVUE下两个text标签混排在一行

最新推荐文章于 2024-07-08 11:32:20 发布
最新推荐文章于 2024-07-08 11:32:20 发布
阅读量7k 收藏 3
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44113868/article/details/106339120
版权

最近在弄一个uniapp项目，页面用nvue实现，出现了下面这种需求
在这里插入图片描述
刚使用nvue没多久，对nvue也不是很熟，很快问题就来了：本来实现这种效果只需要几个text就可以解决了，但是在实现过程中发现nvue下的text是一个块级元素！无论我怎么布局，它都实现不了混排在一行。前端小白，做什么都难，思来想去，我最终选择一种比较笨的方法：将整段话用一个text标签实现出来，将前面的不同的样式，掺杂在一起的文本用几个text标签实现，然后用一个框包裹起来，最后将这个框绝对定位，覆盖到第一个text标签的前面上去。

在这里插入图片描述
在这里插入图片描述
实现的效果如下：
在这里插入图片描述
这种方法局限性太大，如果字体大小不一样的话，就很难保证完美覆盖。效果虽然实现，但是方法太笨，不知道哪位大佬有好的办法告诉一下我这位小白同学，万分感谢！！！

我想喝娃哈哈
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
一个很好用的图文混排label
04-04
源码LYCoreLabel，NSString *coreTextString = @"CoreText[/爱心]框架是基于 iOS 3.2+ 和 OSX 10.5+ [/握手]的一种能够对文本格式和文本布局进行精细控制的文本引擎。它良好的结合了 UIKit 和 Core Graphics/Quartz...
CSS控制让每行显示4个图片的样式
09-25
想让每行显示4个图片的布局该怎么写，相信有很多朋友都不会吧，其实很简单通过简单的浮动便可实现，感兴趣的朋友可以了解下本
使用 uniapp , nvue 遇到的坑 text ！！！
qq_40137978的博客
01-08 1901
text 包括的文本，不要带空格和换行 否则样式会有问题 正确 <text class="tab-btn-text">文本</text> 错误 <text class="tab-btn-text"> 　　　　文本 </text> 一定不要换行 ！！！
nvue页面的text标签显示多行文本
dan_seek的博客
09-30 1429
uniapp中的nvue页面文本必须放在text标签里面，否则不能设置字体大小和颜色，且只能显示一行，如果想显示多行，则需要使用rich-text标签。text和rich-text如果需要显示省略号，可以使用lines和text-overflow属性。使用该class后还需要额外设置宽或者高或者使用flex=1才会生效。// nvue不支持直接传字符串。html-parser插件。
Vue学习笔记01day_08.vue中通过属性绑定为元素绑定行内样式
xinpz的博客
09-11 395
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
实现uniapp两个text标签一行显示
全栈工程师
04-21 2986
此时我们只需在的外层div添加display: inline-block即可实现，文本显示在一行。背景，uniapp自带的标签默认是不在一行的，需要实现一行显示。通过查看computed，发现是一个display属性造成的。
nvue控制文字只显示一行/超出显示省略号
wilL-my的博客
12-02 3784
lines: 1; text-overflow: ellipsis;
uni-app 实现图文混排
hjh70983704的博客
08-24 2249
今天淦我的小组比赛项目的时候碰到了一个问题 因为我做这个比赛项目之前打的前端都是h5的，而这个比赛项目是做移动端的，所以就一直用h5的写法在写，但是很多东西h5有的app是没有的，就比如我今天用到的document.createElement()，在HBuliderX里测试好好的，一上真机，直接报错，然后没办法，只能换方法，但是app的内容我又没学多少，所以就只能摸，结果花了3个小时才摸出来... 实现：点开一片文章显示详情，所以这个布局用在详情页，可以实现简单的图文混排 布局部分： <vi
uni-app中text文本组件的基本使用
Acapplella的博客
07-27 3518
text文本组件的用法 001 - text 组件的属性 属性 类型 默认值 必填 说明 selectable boolean false 否 文本是否可选 space string . 否 显示连续空格，可选参数：ensp、emsp、nbsp decode boolean false 否 是否解码 text 组件相当于行内标签、在同一行显示 除了文本节点以外的其他...
uni-app的text嵌套text问题
qq_39131699的博客
04-23 1602
官方文档说的是： <text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。 然而，text嵌套text时，里面的text编译到微信小程序时会飘到最上面去，h5和app没有这种情况。 想里面嵌套text，外面还是用view好一点。 ...
ios-HXFlexoView 一个非常牛B的View,实现一行多种样式的UILabel UIImageView混排.zip
07-11
大家经常做项目,应该会遇到一个界面的一行有多个UILaebl 多个UIImageView混的情况,尤其是UILaebl的文字长度是动态的情况,这时候就需要计算各种长度位置,比较麻烦,关键是,这种情况非常常见,所以我就想出来写这么一个...
一个支持图文混排的ActionSheet
04-04
从这个api我们可以看出，我们只能设置文本标题，包括destructiveButtonTitle、cancelButtonTitle和otherButtonTitles，官方提供的该控件并不支持图文混排。但有的时候，交互提给我们的需求又需要我们的ActionSheet...
CSS 网页图文混排的10个技巧
09-25
在网页设计中，图文混排是一项基本而重要的技能，它能有效地组织信息，提升内容的可读性和吸引力。本文将介绍10个CSS技巧，帮助你实现美观的图文混排。 1. **首行缩进**：在CSS中，可以使用`text-indent`属性为段落...
nvue中处理text为块级元素的替代解决方法
weixin_44237029的博客
12-01 1746
最近接到一个在uniapp中nvue环境下实现评论区效果的需求，如图
uniApp 开发nvue页面踩过的坑
猿叔的博客
07-18 9192
开发nvue页面踩过的坑 nvue页面不能使用背景图片 布局不能使用百分比、没有媒体查询 背景颜色不支持简写，准确写法：background-color: red; nvue中不支持z-index控制层级，越靠后的代码层级越高 不能使用阴影，可以使用模拟阴影 子元素超出父元素大小是不会显示的，可以加大父元素的大小来让子元素显示 nvue的css，在选择器方面支持的较少，只支持简单的类名控制class=“classA” 文字内容，必须、只能在text标签下,只有text标签可以设置字体大小，字体颜色，并.
nvue页面文字排版混乱
qq_43378240的博客
01-19 719
去检查一下nvue页面里面的<text></text>有没有换行，nvue里所有的text标签里面都得一行，像这样
uniapp中的多个＜view＞或＜text＞如何显示在同一行
热门推荐
weixin_46820967的博客
08-09 1万+
uniapp中的多个view或多个text如何显示在同一行
uni-app 学习之旅 text组件
I_like_garlic的博客
05-06 469
图片取自uni-app官方文档https://uniapp.dcloud.io/component/text <text>组件内只支持嵌套<text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。 decode 可以解析的有&nbsp;&lt;&gt;&amp;&apos;&ensp...
CSS里的几个小知识
最新发布
07-08 387
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
uniapp图文混排
10-11
在uniapp中，可以使用rich-text组件实现图文混排。具体步骤如下： 1. 在页面中引入rich-text组件：`<rich-text :nodes="nodes"></rich-text>` 2. 在data中定义nodes数组，用于存放富文本内容：`nodes: []` 3. 在需要显示图文混排的地方，使用html标签包裹需要显示的内容，并将其存入nodes数组中，例如：`this.nodes.push({name: 'div', attrs: {class: 'text'}, children: [{type: 'text', text: '这是一段文字'}, {name: 'img', attrs: {src: '图片地址'}}]})` 需要注意的是，rich-text组件只支持部分html标签，具体可以参考uniapp官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值