解决span标签自带空格问题

最近在写前端页面时发现这样一个问题 : 用标签包裹的字符会在生成HTML页面以后自动在字符前后加上空格,例如:

<div class="content apply" v-show="detailInfo.type=='3'"><span v-if="detailInfo.intStatus==3||detailInfo.intStatus==4">已报名人数：<span style="color:#AF7C58 !important;">{{signUpUser.length}} </span>人</p><span v-else  style="color:#ADADAD;">活动未开始！</span><div class="applyLine" style="margin-top:10px;" v-show="detailInfo.intStatus==3||detailInfo.intStatus==4"><template v-if="(signUpUser||[]).length>0"><p :key="index" v-for="(item,index) in signUpUser "><span style="width:96px !important;padding-right:82px;">姓名：{{item.userList[0].realName||'- -'}}</span><span style="width125px !important;padding-right:73px;">手机号：{{item.userList[0].callPhone||'- -'}}</span><span style="width:170px !important;">报名时间：{{item.userList[0].createTime||'- -'}}</span></p></template></div>

到页面上的效果如下:

通过截图,我们可以看到在文字之前自动生成了空格,导致 " 已报名人数 " 与第二行 " 姓名 " 无法左对齐,
我的解决办法是在文字前添加 <a>标签,简单粗暴

<a>已报名人数：</a><a style="color:#AF7C58 !important;">{{signUpUser.length}}</a>人

此时页面效果

空格消失

解决span标签自带空格问题相关推荐

Linux（shell）遍历目录删除指定文件，解决文件夹名称带空格问题
最近打算把一些学习资源解压上传到阿里网盘上,可是在解压的时候出现了问题,无故产生很多隐藏文件(猪哥mac电脑,用的keka解压软件). 且文件夹层级很多,不可能实现手动一个一个文件夹删除,所以就考虑写 ...
img标签默认有外边距吗_解决img标签自带外边距问题
三种方法去除img标签自带外边距. #img img{ height: 100px; } #bottom{ width: 100px; height: 100px; background-color: ...
输入文字时自动带空格解决办法
输入文字时自动带空格解决办法: 把输入法中的全角改为半角,即: 把改为
Ijk播放器无法播放带空格或者中文的网络视频的解决方法
项目中遇到一个问题,如果视频的播放地址带空格,ijk显示视频加载失败,看日志是ijk内部网络请求400,解决方法是把视频路径可能为中文或者空格的地方(一般都是名字),使用URLEncoder.enco ...
解决scanf无法完整获取带空格字符串问题
一般情况下我们都会选择用scanf获取字符串,但是当字符串中含有空格时就会出现以下情况 #include<stdio.h> int main() {char arr[10];scanf(& ...
HTML调用Java函数或语句,在动态THML语句中调用JS函数传递带空格参数的问题
刚刚遇到一个问题,调用js函数的参数里带空格,造成调用失败的问题. 部分代码如下: html+=" "; //name中如果有空格就是调用失败 html+=" " ...
html css修改span的字体的值,一、编辑网页文本（span标签与字体属性、文本属性）...
一.本课目标掌握字体属性的使用掌握文本排版样式的使用为什么使用CSS? 有效的传递页面信息使用CSS美化过的页面文本,漂亮,美观,吸引用户可以很好的突出页面的主题内容,使用户第一眼可以看到页 ...
解决p标签自动换行文字两端不对齐问题
<!DOCTYPE html> <html> <head> <title>vue </title> <style type=" ...
两个span标签(或i标签)之间有间隙的问题
有三个i标签,中间一个放文字,前后两个放的是iconfont 效果图如下: 会发现三个i标签渲染出来之后中间会有挺大的空隙: 尝试设置边距为0无果: 解决方法: 方法一:(不推荐) 去掉三个i标签前后 ...

解决span标签自带空格问题

解决span标签自带空格问题相关推荐

最新文章

热门文章