vue(css)实现三个字和四个字等宽、或者3个字和2个字等宽

最新推荐文章于 2024-05-15 15:20:42 发布
最新推荐文章于 2024-05-15 15:20:42 发布
阅读量4.7k 收藏 5
点赞数
分类专栏： Vue2.x Css/Canvas/SVG/Elementui 文章标签： css html
原文链接：https://blog.csdn.net/muyutingfeng2008/article/details/48263073
版权

效果图：
在这里插入图片描述

在做前台界面的时候，比如一些文字的列表或者一些表单的标题，经常是2个字，3个字，4个字的类型。
一般对齐就是在中间打空格或者用 来空开，但是效果并不好，兼容性有问题，造成不美观。
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。

上面效果图的代码：

<div slot="label" style="font-size: 14px;letter-spacing:0.33em;">收件人：</div>

提示：具体的letter-spacing数值，请根据实际显示效果进行调整。
“em” 表示相对于font-size大小的长度。letter-spacing也可以使用"px"作为单位

公孙元二
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 中文字两端对齐
anwenagululu的博客
10-10 663
要在Vue.js中实现段落文字两端对齐，你可以使用CSS样式来设置文本对齐方式。元素，并将文本对齐样式应用到这些段落元素上。我们使用了CSS选择器。
vue解决两个字和三个字对齐问题
成长永远没有尽头
06-21 2936
在接收数据的时候经常会出现两个字的名字的名字和三个字的名字，如果不对齐会显得非常难看 所以这个时候就需要格式一下我们的数据，在两个字中间加入一个空格，可以使用过滤器的方法将所有两个字的名字中间加入一个空格。 过滤器 <script> filters: { nameFormat (value) { if (value.length < 3) { //如果是两个汉字 value = value.slice(0, 1) + '　' + value.
使用html+css实现等宽列
07-01
使用html+css实现等宽列。
html5+css3实现圆分成四个扇形，并有点击事件
12-15
】做一个圆:周围4个扇形，有点击事件（html5+css3实现扇形），html5+css3实现圆分成四个扇形，并有点击事件。使用的是vue，但是可以提取为html+css，自己提取
vue-路由精讲 二级路由和三级路由的作用
12-28
1、我们继续上一个案例 vue — 路由精讲制作导航 — 从无到有 ，在 about文件夹下 创建一些文件夹。如下： 2、编写about.vue代码。当我们点击导航中 “关于我们” ，就会显示该部分内容。代码中写了四个可供点击后可以跳转的模块。和 <router></router> 表示你点击了哪个组件，哪个组件就会渲染到这里来。 其中注意：css样式,我们直接引入bootstrap中的导航的样式，在标签中直接添加class属性的值就可以了。 about.vue代码 <template> <div> <div class=row> //row
Css使字符占位的宽度一致（如两个字占四个字符位置）
weixin_56004744的博客
03-01 3406
【代码】Css使字符占位的宽度一致（如两个字占四个字符位置）
vue 设置文字间距
qq_52343978的博客
06-11 1401
【代码】vue 设置文字间距。
CSS文字真正两端对齐(俩字和三字对齐)
ydZ157的博客
11-15 2277
CSS文字真正两端对齐(俩字和三字对齐)
css实现两个字和三个字对齐
weixin_72472409的博客
11-07 387
姓名<span></span></div>改进： 让.user_info盒子浮动起来，即加上 float: left;<div class="user"> ：测试人员
css实现三个字和四个字等宽
nidimyger的博客
08-16 276
【代码】css实现三个字和四个字等宽。
前端面试题js，html，css，vue
12-28
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 具体步骤： 第一步： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化 第二步： compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 第三步： Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个 update() 方法 3、待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。 第四步：MVVM 作为数据绑定的入口，整合 Obs
详解用vue-cli来搭建vue项目和webpack
12-12
vue-cli 用vue-cli来搭建vue项目 第一步：全局安装vue-cli sudo npm install vue-cli -g 第二步：初始化一个项目 vue init webpack-simple projectName 第三步：把文件切换到初始化的项目中 cd projectName 第四步：安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装，这样快很多 cnpm install 第五步：运行 npm run dev 完成一个初始化vue项目 webpack 要开始一个vue项目， 那也必须要了解webpack webpack是一个前端
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）...
按钮居中vue_vue组件实现文字居中对齐的方法
weixin_40005437的博客
12-21 2586
继续学习Vue，这次是一个组件的制作过程先让我们来看一下组件的预期效果上图为公司自营的一个微信商城的某一部分截图，可以看到红框内部分的文字多行与单行是居中对齐的，我们现在要做的就是使用Vue把里边的文字模块制作成一个可以复用的组件。首先我们先把css部分拿下来css:.word-v-middle{margin-bottom: 0;font-size: 12px;min-height: 31px;d...
vue.js 获取当前屏幕的宽度_Vue动态获取width的方法
weixin_39984661的博客
12-19 2647
vue里想用Bootstrap的进度条，aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">20%主要是把style="width: 20%;"变成动态获取的。:style="'width:' + percent + '%'"这样写就好了。也可是这样：用vue 获取动态元素的宽度。首页，要放在...
用CSS实现段落前面缩进两个字
php菜鸟技术天地
06-02 4114
p{  text-indent: 2em; } --> 段落前面空两个字的距离，不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。
一句话同时存在中文和英文，设置其字间距
keloneko的博客
05-10 1375
css中有两个样式用来设置字间距 1.letter-spacing <div class="letter">word间距展示</div> .letter { letter-spacing: 1em; background-color: #ff0; } letter-spaing用来调整汉字的字间距，对于英文单词会将其按字母拆分，而后调整...
fabricJs 在vue项目中的实战记录（四）添加文字以及文字的操作[字体大小、颜色、字间距、行间距、透明度、加粗、斜体、下划线、删除线、对齐方式、字体设置]
weixin_43839317的博客
11-17 6357
在阅读以下文章的基础上查看本篇笔记： 第一篇：fabricJs 在vue项目中的实战记录（一）引入以及初始化 第二篇：fabricJs 在vue项目中的实战记录（二）fabricjs设置海报背景（图片以及纯色） 第三篇：fabricJs 在vue项目中的实战记录（三）元素的上移层级、下移层级以及删除 1、前言： // 1、let Shape = new fabric.Textbox('字体内容', currentOptionCss) : currentOptionCss=>字体样式 // 2、im.
CSS学习笔记之中级教程（二）
最新发布
wz_1992的博客
05-15 331
-.+CSS学习笔记之中级教程（一） 6、CSS 布局 - display: inline-block 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。 同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。 与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可
用VUE写一个JS和CSS抽奖代码
04-20
好的，我可以为您提供一个VUE的抽奖代码示例。以下是代码： ``` <template> <div class="container"> <h1>抽奖</h1> <div class="lottery-box"> <div class="prize" v-for="prize in prizes" :key="prize.index" :class="{active: prize.isActive}"> <img :src="prize.image" alt=""> <div class="prize-name">{{ prize.name }}</div> </div> </div> <button class="btn" @click="startLottery" :disabled="!canStart">开始抽奖</button> </div> </template> <script> export default { data() { return { prizes: [ { index: 1, name: '一等奖', image: '/img/prize1.jpg', isActive: false }, { index: 2, name: '二等奖', image: '/img/prize2.jpg', isActive: false }, { index: 3, name: '三等奖', image: '/img/prize3.jpg', isActive: false }, { index: 4, name: '幸运奖', image: '/img/prize4.jpg', isActive: false }, ], activeIndex: -1, isStarted: false, canStart: true, }; }, methods: { startLottery() { if (this.isStarted) { return; } this.isStarted = true; this.canStart = false; this.activeIndex = -1; let index = 0; const timer = setInterval(() => { index++; if (index > this.prizes.length - 1) { index = 0; } this.activeIndex = index; }, 50); setTimeout(() => { clearInterval(timer); this.isStarted = false; this.prizes.forEach((prize) => { prize.isActive = false; }); const winnerIndex = Math.floor(Math.random() * this.prizes.length); this.prizes[winnerIndex].isActive = true; this.activeIndex = winnerIndex; this.canStart = true; }, 3000); }, }, }; </script> <style> .container { text-align: center; } .lottery-box { margin-top: 50px; display: flex; justify-content: center; } .lottery-box .prize { width: 200px; height: 200px; margin: 20px; position: relative; cursor: pointer; transform: rotate(0deg); transition: all 3s ease-out; } .lottery-box .prize img { width: 100%; height: 100%; object-fit: cover; } .lottery-box .prize-name { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; color: #fff; background: rgba(0, 0, 0, 0.5); transition: all 0.3s ease-out; transform: translateY(200px); } .lottery-box .prize.active .prize-name { transform: translateY(0); } .btn { margin-top: 50px; padding: 20px; background: #ffcc00; font-size: 24px; font-weight: bold; color: #fff; border: 0; border-radius: 5px; cursor: pointer; } .btn:disabled { background: #ccc; cursor: default; } </style> ``` 这个抽奖代码使用VUE编写。在这个示例代码中，您可以看到一个抽奖盒子，其中包含四个奖项图片和名称，还有一个开始抽奖的按钮。当用户点击“开始抽奖”按钮时，抽奖将开始并在3秒内随机选择一个获奖者。在抽奖过程中，盒子中的奖项将随机旋转，直到最终结果。希望这个VUE抽奖代码示例能对您有所启发！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值