webstorm中emmet展开a标签和行内元素不换行的解决办法
大家好我是木瓜太香,大家在使用 webstorm 编写 html 的时候可能会遇到展开部分标签挨在一起的情况,相信很多小伙伴都想解决这个问题,接下来我们就开始吧!
先来看看我们输入如下 emmet 代码的时候展开的效果是怎么样的
div>a*3
展开效果:

这个时候我们可能需要自己去一个一个回车排版,当然这肯定不是你想要的,现在我们来解决这个问题。
在解决问题之前,我们要知道产生这个问题的原因,在 webstorm 中是对标签进行分类的,其实从逻辑上来说,a 标签这种本身就属于行内标签,不换行在逻辑上是没有任何问题的,但是我们开发的时候经常需要根据情况来调整,因为很多时候 a 标签会写的很长,我们更希望换行来增加可读性。
解决办法: 将 a 标签在 webstorm 中的分类变成非行内标签即可。
设置路径:File | Settings | Editor | Code Style | HTML | Other
找到上述路径对应的页面之后,向下翻动,找到 Inline elements 这个选项,将右边输入框中的 a 标签删除掉,之后保存设置即可,其他的行内标签也是同样的修改方法。

经过以上的修改我们最终展开的效果如下图:

好了这个问题到这里我们就解决了,如果大家有更多 webstorm 上的疑问,或者想学习更过 webstorm 相关的技巧,可以去哔哩哔哩搜索:木瓜太香 。(PS:目前应该是对 webstorm 做的最全的了)
有前端问题需要讨论的可以加我的qun:237871108。也可以通过哔哩哔哩搜索木瓜太香找到我。
webstorm中emmet展开a标签和行内元素不换行的解决办法的更多相关文章
- css中li、a、span行内强制不换行
li.a.span行内强制不换行:white-space:nowrap; 没有之前的效果 加上white-space:nowrap;后
- html css 怎么使img和a标签在一个行内元素中间对齐
答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦. <div id="box"> <div cla ...
- css 行内元素和块级元素
1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- Web前端开发最佳实践(6):过时的块状元素和行内元素
前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...
- html常见的块元素和行内元素(特别注意个别块元素不能嵌套其他块元素)
html中常见的块元素:div.p.h1-h6.ul.ol.li.hr.table.pre等 块级元素新开启一行即使是设置了width属性也是独占一行(可设置float浮动属性调整布局).尽可能撑满父 ...
- 块级&行内元素总结
一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...
- html书写行内元素时-tab和换行会在行内元素间引入间距
目录 html文本中的控制字符会被解析为文本节点 书写行内元素时,换行符LF与水平制表符HT会引入莫名的元素间间隔 其他控制字符是否会引入间距的验证 html文本中的控制字符会被解析为文本节点 举例: ...
- html行内元素
定义 行内元素只占据它对应标签的边框所包含的空间,没有换行效果 div{ /* 定义行内元素*/ display:inline } 特点 多个元素可以横排显示 不支持宽高和上下margin 支持pad ...
随机推荐
- C#LeetCode刷题之#811-子域名访问计数(Subdomain Visit Count)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3814 访问. 一个网站域名,如"discuss.lee ...
- Homekit_人体感应器
前置需求: 苹果手机一台 Homekit人体感应一台 USB供电线一根 这款产品内置人体红外感应器,使用圆环设计,增大了其接触面积,使感应变得更加灵敏,重量轻,方便将其粘贴到墙上,同时支持二次开发,如 ...
- 关于什么时候用,怎么用:ExecuteNonQuery(),还有其它返回值
ExecuteScalar方法返回的类型是object类型,这个方法返回sql语句执行后的第一行第一列的值,由于不知到sql语句到底是什么样的结构(有可能是int,有可能是char等等),所以Exec ...
- XXE漏洞学习笔记
XXE 参考文章 名称 地址 一篇文章带你深入理解漏洞之 XXE 漏洞 https://xz.aliyun.com/t/3357 Web Hacking 101 https://wizardforce ...
- ios 创建sdk与demo同一个工程
思路摘要: 步骤1:创建一个文件夹用来放该项目 步骤2:设置工程工作区间 步骤3: 创建广告sdk项目 步骤4:创建广告sdkDemo项目 步骤5:配置一些文件 步骤6:将sdk导入到demo中进行 ...
- 蓝牙RFCOMM通信
最近需要在某个开发板上面通过蓝牙和手机蓝牙连接,并通过RFCOMM通信.还没有做过蓝牙RFCOMM相关工作,因此先在linux PC上面调试一下流程,并在此记录调试过程. 一.说明 RFCOMM协议基 ...
- wsgi的environ变量
The environ dictionary is required to contain these CGI environment variables, as defined by the Com ...
- 团队作业3 需求改进&系统设计(银河超级无敌舰队)
目录 一.需求&原型改进 1. 需求改进 2. 修改说明书 3.功能分析 4. 调整WBS及计划 二.系统设计 1. 总体设计 2. 数据库设计 3.社团设计 三.Alpha任务分配计划 1. ...
- Python趣味入门5:循环语句while
跟着小牛叔,找准正确编程入门姿势,每天只要阅读10分钟. 任何语言都有循环语句,在Python里循环更是变化无穷,有基本的循环,有循环else语句,引伸出来的还有迭代器.推导式,咱们先学习最简单的一种 ...
- 关于函数式接口, printable 自定义
这段代码在jdk1.8可以使用, 由于我是jdk14, 会报错. 这里可以优化, lambda表达式进一步优化写为: printString(System.Out::println); 注意案例版 ...