CSS 实现自动换行、强制换行、强制不换行的属性
实现效果 1.自动换行： word wrap:break word; word break:normal; 2.强制换行： word break:break all; 按字符截断换行 /\ 支持IE和chrome，FF不支持\ / word wrap:break word; 按英文单词整体截断换行 /\ 以上三个浏览器均支持 \ / \ 注意：单词换行需要父盒子为块级元素 3.强制不换行： white space:nowrap; 换行属...
css--实现一个文字少时居中，文字换行时居左的样式
最近群里的小伙伴去面试，遇到这样一个问题，面试官问："用 css 对一行文字进行布局，当文字不够换行的时候，这行文字要居中显示，当文字出现换行的时候，这行文字要靠左显示。"，遇到这样的需求一下束手无策，后来查下资料，哦，原来这样，这里总结一下实现的具体方法。 1.需求分析与使用场景 具体需求分析：未知文字的长度的时候，当文字的长度小于盒子的宽度的时候，也就是一行可以放的下的时候，文字居中，当文字长度大于盒子宽度的时候，文字要实现自动换行...
css文本溢出处理——单行、多行_css 单行文本溢出
文章目录 日常开发中，经常会遇到需要展示的文本过长，这种情况下，为了提高用户的使用体验，最常见的处理方式就是把溢出的文本显示成 。 处理文本的溢出的方式：1）单行 ； 2）多行文本溢出； 3）超出容器高度缩略展示；4）缩略后加展开收起按钮可点击操作。 一、单行文本溢出省略 1、主要的css属性： ：文字长度超出限定宽度，则隐藏超出的内容 visible: 默认值。内容不会回修剪，可以呈现在元素框之外。 scroll: 无论是否超出容器，...
一行居中，换行居左
首先：文本内容的居中实现大家都不陌生 :center; 就可以轻松实现文本水平居中的效果 ；那么多行的时候居左显示怎么办呢？这个时候就需要嵌套一个P标签来实现了。 下面看下源码： <img src="../../ resources/v2 f563c7db0834c73aab3a0f982dc5c.jpgsource1def8aca" data caption="" data size="normal" data rawwidth="1...
unocss额外动画库
包名：unocss preset extra 网址：
你知道移动端适配吗
自适应：根据不同的设备屏幕大小来自动调整尺寸、大小 响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应 目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图： 当我们针对一个手机进行布局设计时，设置了一个 200 200 大小的盒子 但在不同的设备上，由于逻辑像素不同的问题，会使得这个盒子在更大的视口上显得很小，在更小的视口上显示很大 因此我们需要进行适配 让它在不同设备...
CSS | 是时候学习 Grid 布局了
在前端开发中，创建灵活且响应式的布局是非常重要的。为了实现这一目标，Grid 网格布局成为了一种强大的工具。它提供了一种直观且灵活的方式来构建网页布局，本文将从Grid的基本概念入手，介绍Grid网格布局中的常用属性和功能。那么下面我们一起来探索这个强大且灵活的布局方式吧！ Flex布局是一维的排版方式，也就是说一次只能控制一个方向（水平方向或者垂直方向），如果需要控制另一个方向需要再添加一层flexbox容器。 Grid布局是二维的排...
css - 如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题
引言 页面滚动条造成宽度减小的场景很常见了，由于 块级元素的流动性，其宽度默认为100%的 宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压 的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。 滚动条的宽度是多少？ 既然要解决滚动条造成的问题那么首先需要了解滚动条，即 的信息主要就是他的宽度，我们把页面的 置为 ，那么滚动条就会默认占据了空...
带圆角的虚线边框？CSS 不在话下
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： 但是，原生的 dashed 有一个问题，就是我们 无法控制虚线的单段长度与间隙 。 假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。 那么，在 CSS 中，我们还有其它方式能够实现带圆角，且虚线的单段长度与...