大家好我是木瓜太香,大家在使用 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标签和行内元素不换行的解决办法的更多相关文章

  1. css中li、a、span行内强制不换行

    li.a.span行内强制不换行:white-space:nowrap; 没有之前的效果 加上white-space:nowrap;后

  2. html css 怎么使img和a标签在一个行内元素中间对齐

    答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦. <div id="box"> <div cla ...

  3. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

  4. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  5. Web前端开发最佳实践(6):过时的块状元素和行内元素

    前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...

  6. html常见的块元素和行内元素(特别注意个别块元素不能嵌套其他块元素)

    html中常见的块元素:div.p.h1-h6.ul.ol.li.hr.table.pre等 块级元素新开启一行即使是设置了width属性也是独占一行(可设置float浮动属性调整布局).尽可能撑满父 ...

  7. 块级&行内元素总结

    一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...

  8. html书写行内元素时-tab和换行会在行内元素间引入间距

    目录 html文本中的控制字符会被解析为文本节点 书写行内元素时,换行符LF与水平制表符HT会引入莫名的元素间间隔 其他控制字符是否会引入间距的验证 html文本中的控制字符会被解析为文本节点 举例: ...

  9. html行内元素

    定义 行内元素只占据它对应标签的边框所包含的空间,没有换行效果 div{ /* 定义行内元素*/ display:inline } 特点 多个元素可以横排显示 不支持宽高和上下margin 支持pad ...

随机推荐

  1. 花式求解 LeetCode 279题-Perfect Squares

    原文地址 https://www.jianshu.com/p/2925f4d7511b 迫于就业的压力,不得不先放下 iOS 开发的学习,开始走上漫漫刷题路. 今天我想聊聊 LeetCode 上的第2 ...

  2. cocos-2d解决rapidjson的string参数转换

    解决方法 AddMember的传入的参数不是string, 所以会报错 本质就是把string类型转换成 参数的类型 username = "string"; rapidjson: ...

  3. TypeScript是什么,为什么要使用它?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://medium.com/swlh/what-is-typescript-bf333e ...

  4. Git使用之submodule

    入职第一周,就因为clone项目而产生了很大的障碍,花了差不多三四个小时才定位问题并解决,记录一下. 一.问题 当我们在使用Git克隆项目的时候,无法克隆下来一个文件夹.记该文件夹为A,A在远程仓库是 ...

  5. keil5 使用JLink 向nrf52840DK 下载程序出现No Cortex-M SW Device Found

    今天打开52840 keil5 工程,下载程序无法下载成功,提示如下: 在Jlink 配置中(Option for target....-> Debug->Setting )SWDIO也无 ...

  6. [HDU6793] Tokitsukaze and Colorful Tree

    题目 又是一个条历新年,窗前的灼之花又盛开了. 时隔多年,现在只有这一棵树上盛开着残存的 \(n\) 朵灼之花了. 尽管如此,这些灼之 花仍散发出不同色彩的微弱的光芒. 灼之花的生命极为短暂,但它的花 ...

  7. 记录一次CDH集群邮件报警功能的设置

    1.通用的配置CDH邮件报警设置 进入cloudera manager service页面,选择配置 左侧菜单Alert Publisher 勾选[启用电子邮件警报] 邮件服务协议smtp,如果使用s ...

  8. 求X值问题

    这,其实是一道数学题,难就难在要把数学模型用编程语言实现,其中的规律如果看不出来就比较鸡肋,这类题可以算是智商题,做这类题千万不能紧张,血的教训. 题目描述 已知有整数x,x + 100为一个平方数. ...

  9. 区块链入门到实战(25)之以太坊(Ethereum) – 以太币单位

    以太币的主要单位是以太/Ether,即一个以太币,以太币的最小单位是wei. 以太币最小单位 wei 是以虚拟币先驱人物:戴伟 Wei Dai 命名,戴伟 W Dai 是一位兴趣广泛的密码学专家,他在 ...

  10. 8点了解Java服务端单元测试

    一. 前言 单元测试并不只是为了验证你当前所写的代码是否存在问题,更为重要的是它可以很大程度的保障日后因业务变更.修复Bug或重构等引起的代码变更而导致(或新增)的风险. 同时将单元测试提前到编写正式 ...