文章关键字 ‘white-space’

5分钟快速了解text-wrap:balance的作用

2023年07月25日,星期二

没想到,以前有些不方便实现的排版和布局效果可以使用text-wrap:balance轻松实现。

阅读全文…

CSS排版为何强?瞧瞧多牛这换行

2022年06月30日,星期四

网页文字与换行

在 CSS 这门语言中,凡是 Web 中的换行规则都可以改变,无论是中文的还是英文的,灵活到超出你的想象,非常强大!

阅读全文…

为什么white-space:nowrap可以让文字一行显示?

2021年07月26日,星期一

鑫空间鑫生活white-space封面

分享一点关于Web中空格排版的小知识,希望对大家的学习有所帮助。

阅读全文…

CSS text-decoration实现宽度100%波浪线效果

2020年03月21日,星期六

波浪线头图占位图

波浪线效果CSS 径向渐变可以绘制,SVG也可以实现,这里介绍另外一个自己想到的实现方法,使用text-decoration实现宽度100%波浪线效果,易理解易上手,尺寸可控,颜色可控。

阅读全文…

小tips: JS DOM innerText和textContent的区别

2019年09月7日,星期六

innerText和textContent

innerText和textContent很多人会困惑,因为都可以用来获取文本内容,实际上,两者还是有很多区别的,本文就将介绍这两个属性的异同,希望可以对大家的学习有所帮助。

阅读全文…

有人考了我一道CSS题目

2018年10月21日,星期日

考我一道CSS题目

前段时间@快叫我韩大人私信我考了我下面这个CSS题目:在不改变HTML结构,同时保留元素高度前提下,实现某一个布局效果……我觉得还挺有意思的,在征得其同意的前提下输出了这篇文章,大家若有兴趣,也可以进来看看,自己能不能实现相关需求。

文中提供了可实时编辑预览效果的demo,方便大家尝试自己思路。

阅读全文…

借助wbr标签实现连续英文字符的精准换行

2018年09月1日,星期六

文章头图

在web网页中,连续英文单词默认是不换行的,使用word-break虽然能够有效,但是,会有一个很明显的问题,这换行的位置把英文单词直接破开了,可读性下降。有没有什么方法,技能换行,又不破坏单词呢?可以试试HTML中的wbr标签。

阅读全文…

SVG <foreignObject>简介与截图等应用

2017年08月4日,星期五

SVG图形表现非常给力,但是对于纯粹的文本展示却很吃力,例如希望文字到边缘可以自动换行,结果SVG却很难做到,对于XHTML而言这可以说是天生的理所当然的特性,那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢,有,那就是SVG的<foreignObject>元素!

阅读全文…

word-break:break-all和word-wrap:break-word的区别

2015年11月19日,星期四

虽说标题是word-break:break-all和word-wrap:break-word的区别,实际上,两者的比对只是小半内容,还有很多内容是对word-break和word-wrap属性的一些了解。本文内容虽然不多,但是,demo啊截图啊什么的都还挺全,希望本文的内容能够对您的学习有所帮助。

阅读全文…