前端资源网 - w3h5Flex布局导致text ellipsis失效问题解决
Deshun 发布于 5个月前 (07-26) 839℃ 评论(0) 赞 (3)
文本超出显示省略号在日常开发中还是有不少这样的需求的。举个例子：单行文本溢出显示省略号div{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }效果如下：前端资源网前端资源网但是，如果使用 flex 布局就会...
Tag "css" 相关话题
CSS position:fixed 定位基准元素为视口问题解决
Deshun 发布于 7个月前 (06-02) 530℃ 评论(0) 赞 (2)
做前端的同学，肯定非常熟悉 CSS 的 position 属性，它用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的位置。绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。他们默认的祖先元素都是视口，absolute 大家应改很熟悉，给它的父元素增加...
CSS伪类::before、::after中使用svg图标
Deshun 发布于 1年前 (2023-10-12) 960℃ 评论(0) 赞 (0)
之前用的 iconfont.css 可以设置伪类元素的字体为 iconfont ，然后给伪类的 content 属性值定义 iconfnt 的图标标识就能正常显示了。但是最近精简代码我把 iconfnt.css 移除了，只保留了 iconfnt.js，这样之前 css 中用上面方法引用的图标失效了。就一个图标，总不能再把那么大的 css 引进来吧，可以不以直接给伪类设置一个 svg 图标呢？当然是...
create-react-app项目样式不生效的一种解决方法
Deshun 发布于 2年前 (2023-02-24) 1261℃ 评论(0) 赞 (1)
一个老项目，直接 yarn start 运行时样式没有加载。先说一下采坑过程：之前写过一篇 create-react-app中CSS Module不生效的解决办法 ，但这个项目是自编码，需要 npm link 到主项目，所以就不能使用 CSS Module 写样式了。页面都是使用 impo...
create-react-app中CSS Module不生效的解决办法
Deshun 发布于 2年前 (2023-02-02) 1327℃ 评论(0) 赞 (0)
在 Create React App 脚手架创建的项目中使用 CSS Modules 。第一种方式create-react-app 中内置了使用 CSS Modules 的配置，create-react-app 内置的用法是将所有的 .css / .less / .scss 等样式文件都修改成 .module.css / .module.less / .module.scss 等。即可使用 CSS...
React 组件库 CSS 样式问题分析
1Deshun 发布于 2年前 (2022-12-09) 1598℃ 评论(0) 赞 (1)
首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析目前存在的问题：1. antd 样式被重复引用，打包时被重复编译进 css 文件，造成代码冗余。2. 组件自定义样式没有通过类名区分，导致页面中使用多个组件时样式污染。关于 CSS 样...
Flex弹性布局元素被挤压变扁问题解决
1Deshun 发布于 3年前 (2022-07-05) 1466℃ 评论(0) 赞 (0)
像这种，如果子元素的宽度过大，就会出现被挤扁的情况，不能显示实际的宽度。解决方法：有一个 flex-shrink 属性，可以解决元素被挤压的问题。flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收...
LESS中加‘~’符号的区别
Deshun 发布于 3年前 (2022-04-07) 3848℃ 评论(0) 赞 (0)
在 *.less 文件中写：.test { width: calc(300px - 20px); }在相应的 *.css 文件中的结果是这样的：.test { width: calc(280px); }这里的 calc(300px - 20px) 由编译软件计算得出。在 *...
行内元素、块级元素和行内块级元素的区别和联系
2Deshun 发布于 4年前 (2021-03-17) 2565℃ 评论(0) 赞 (0)
HTML，也叫“超文本标记语言”，其元素无非就是行内元素、块级元素和行内块级元素。行内元素：行内元素只占据它对应边框所包含的空间，行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用。但是 padding 内边距可以起作用， m...
Vue中使用v-html内容图片过大的解决方法
Deshun 发布于 5年前 (2020-07-01) 4568℃ 评论(0) 赞 (0)
在同事的项目中遇到一个问题，使用 Vue 的 v-html 后，内容里边的图片太大，显示不全。但是设置 style 又不管用：.img { max-width: 100%; height: auto; }实际上还是 Vue 的 scoped 穿透问题：参考我之前的文章（Vue项目中scoped属性的作用，及scop...