Vue控制CSS文字只显示前几位

最新推荐文章于 2022-09-16 15:15:51 发布
最新推荐文章于 2022-09-16 15:15:51 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： CSS 前端 Vue 文章标签： javascript css css3 vue.js html
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_42435041/article/details/115543665
版权
前端 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
Vue
15 篇文章 0 订阅
订阅专栏
CSS
2 篇文章 0 订阅
订阅专栏

一开始以为给点宽度，溢出的隐藏和显示...

 

 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
  max-width: 180px;

但需求似乎并不想这样显示，而是精确显示前几位

使用数组截取前6位再添加...，虽然别扭了点，但好歹也算是满足需求了吧

 {{item.nick.length > 6? item.nick.substr(0, 6) + '...': item.nick }}

 

HsuVenChing
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html中限制显示文字个数,【css/js】限制一行和多行文字数量，超出部分用省略号显示...
weixin_29775951的博客
06-15 7225
1. 设置一行文字显示文本数量，超出部分用…表示知识点：css3 text-overflow属性属性值描述clip修剪文本。ellipsis显示省略符号来表明被修剪的文本。string使用给定的字符串来表明被修剪的文本。代码实现(单行)超出部分省略：javascript#div1{overflow: hidden;text-overflow: ellipsis; //超出部分以省略号显示...
Vue自定义指令
weixin_68018372的博客
07-29 242
Vue.directive("指令名称",{//el代表指令绑定的dom元素，可以对el进行dom操作}})directives{"指令名称"{}}}el指令所绑定的元素，可以用来直接操作DOMbinding一个对象,包含以下propertyname指令名，不包括v-前缀。value指令的绑定值，例如v-color="‘red’"中，绑定值为‘red’。oldValueexpression字符串形式的指令表达式。arg传给指令的参数，可选。......
标题只显示前12个字，剩余的用省略号表示；
wyh_mwk的博客
08-14 2632
1、CSS样式显示超出部分用省略号显示（只显示省略号，无法控制字数） white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 2、用截取字符的方法显示前12个字符，判断当标题字符个数大于12时，添加字符串... 举例：      ...
html 只显示几个字符,HTML5----CSS显示半个字符
weixin_32513585的博客
06-10 640
CSS显示半个字符的基本思路：就是一个字写两遍，分别显示一半。这里就须要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置同样的字符，仅仅显示半个，而原字符显示另外一半，最后把它们拼成一个字。效果图：CSS:.halfStyle {position:relative;display:inline-block;font-si...
Vue限制文本框显示字数,多余用...代替
m0_58565372的博客
07-04 1926
效果图： 1.在filters.js封装过滤器方法 2.在main.js引用过滤器 3.在需要控制字数的地方使用此过滤器 就可以实现效果图的效果
vue限制显示字符为20个，多余为...
qq_38507112的博客
10-25 7048
filterFun: function (value) { if(value&& value.length > 20) { value= value.substring(0,20)+ ‘…’; } return value; }
vue 前几位显示数据，中间用 *** ，后几位显示数据
不想起床
07-31 1889
需求 一行数据太长，但是想要显示起来美观一些，那就前面，后面，显示固定位数。中间用***显示 之前 现在 具体实现代码 利用fliter过滤器 {{item.BlockHash | testfile}} 第一个参数是显示的字段数据参数，第二个是过滤器函数的名字 过滤函数filter,是与mounted，created平级位置 // 数字中间加*号 value是传的参数值(后端返回的，需要你处理的数据) filters: { testfile (value) { const sta
vue控制多行文字展开收起的实现示例
10-16
在Vue.js中，控制多行文字的展开与收起是一个常见的需求，特别是在处理长文本显示时。本示例提供了一种实现方式，通过CSS样式结合Vue的数据绑定和事件监听来达到这一目的。以下是对该实现的详细解释： 1. **CSS样式...
清除修改删除Vue自带的CSS样式
03-17
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
Vue2 css signal chart
01-19
Vue2 CSS Signal Chart 是一个基于Vue2框架的项目，用于创建动态信号图表。这个项目主要利用CSS来设计和实现图表的样式，同时结合Vue2的响应式特性来更新图表的数据，展示实时变化的信号数据。下面我们将深入探讨Vue...
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
在Vue框架中，实现鼠标经过文字时显示悬浮框效果，是一种常见的增强用户交互体验的方式。在Web开发中，这样的功能可以用于提供额外的提示信息，帮助用户更好地理解页面上的元素。以下是一个详细的步骤来实现这一功能...
iview中Table组件表格一行内容溢出部分使用...（省略号）来显示
li15565348506的博客
09-16 2353
iview中Table组件表格一行内容溢出部分使用...（省略号）来显示
css 技巧 文字只显示前几位
栓独爱青春的博客
01-21 4262
Title #divcss5{width:150px; } #divcss5 li{width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 显示不完显示省略号，测试内容 第二排测试内容超出显示省 能显示完几个字
html获取字段前几个字母,纯CSS实现取字符串的第一个字符实现文字图标功能
weixin_29894211的博客
05-31 517
如何通过CSS实现文字图标/*图标样式*/.nav-icon-normal {width: 32px;height: 32px;line-height: 33px;display: inline-block;border-radius: 6px;background-color: #b3b4c5;vertical-align: middle;overflow: hidden;font-size: ...
【vue】指定v-for循环显示前3个
weixin_45319500的博客
01-13 5923
<div class="i-column" v-for="(item, index) in commodityList"> <div class="index_show_item" @click="turn('List')" v-show="index<3"> </div > </div >
vue3使用计算属性代替过滤器，实现对显示文字字数的限制
可达鸭的博客
07-28 768
template <template> <div> <span :title="item.name">{{sliceStr('无论多少字只显示5个字',5)}}</span> </div> </template> script import {computed} from "vue" export default { setup(props,context){ cons.
vue 根据字符串的长度控制显示的字数超出显示省略号
热门推荐
ztudouni的博客
08-23 3万+
利用vue中的 过滤器filter <span class="icon">{{item.hashName | ellipsis}}</span> 定义过滤器 export default { name: 'xx', filters: { ellipsis (value) { if (!value) return '' if...
vue显示3个字符后面省略号显示
CCGLF的博客
02-28 438
filters: { ellipsis(value) { if (!value) return '' if (value.length > 3) { return value.slice(0, 3) + '...' } return value } }, {{字段|ellipsis}}
vue中实现当文本超长时，中间显示省略点，两端文字显示
qq_39285178的博客
01-13 3573
最近做一个资源共享的需求，要求将资源名称，共享目标人的工号一定要显示出来，也就是文本超长，显示省略点，但是如果使用css，文本超长省略号会在末尾显示，因此利用js截取来实现 //获取字体是为了计算文本所占用的宽度，必须传递一个dom节点，随便选择一个即可，因为系统的字体都是一样的 mounted(){ // 获取系统字体 this.getFontFamily(document.getElementById('side-content')) }, 将获取的字体参数使用全局变量存储起来
vue css3 文字首尾无缝跑马灯效果
最新发布
09-01
使用Vue结合CSS3可以实现文字首尾无缝跑马灯效果，具体步骤如下： 1. 在Vue组件中，首先需要引入所需的CSS样式，并在模板中创建一个容器元素，用于展示文字内容。 2. 在Vue的data属性中定义一个变量，用于存储要展示的文字内容。 3. 在Vue的created生命周期钩子函数中，使用定时器来不断修改文字内容，以实现跑马灯效果。 4. 在CSS样式中，为容器元素设置固定的宽度和高度，并设置overflow属性为hidden，以隐藏超出容器大小的文字。 5. 使用CSS3的动画特性来实现文字的平滑滚动效果。可以使用@keyframes关键字定义一个动画序列，通过改变文字内容的左边距来实现滚动效果。 6. 将定义的动画序列应用到容器元素上，设置动画的持续时间、循环次数等属性，以控制文字的滚动速度和效果。 通过以上步骤，就可以实现一个简单的Vue CSS3文字首尾无缝跑马灯效果。当页面加载后，文字内容会在容器中无缝地滚动显示，给用户一种跑马灯的视觉效果。同时，通过使用Vue的数据绑定功能，可以动态地改变文字内容，实现更丰富的交互效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HsuVenChing

文章能帮你，那将是我最大的荣幸

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值