凹凸曼但没有小怪兽 CSS的世界

最新推荐文章于 2024-07-22 18:43:53 发布

花花最美腻

最新推荐文章于 2024-07-22 18:43:53 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

分类专栏： css的世界文章标签： css的世界 css

本文链接：https://blog.youkuaiyun.com/qq_38912819/article/details/83096439

css的世界专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用CSS内联块级元素显示文本的技巧，通过设置宽度为0，利用文字的最小宽度原则展示文本，适用于特殊布局需求。文章详细解释了东亚文字和西文的最小宽度特性，并探讨了代码优化的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：使用一层HTML标签实现如下效果

效果图

套路图

这是从“ CSS的世界 ”中学来的（P23），大神就是大神，熟练掌握着css各种属性的特性。

以下是代码：

<span class="ao"></span>
<span class="tu"></span>

.ao,
.tu {
    display: inline-block;
    width: 0;
    font-size: 14px;
    line-height: 18px;
    margin: 35px;
    color: #fff;
}
.ao:before,
.tu:before {
    outline: 2px solid #cd0000;
    font-family: Consolas, Monaco, monospace;
}
.ao:before {
    content: "love你love";
}
.tu {
    direction: rtl;
}
.tu:before {
    content: "我love你";
}

原理：这是显示：内联块;的“首选最小宽度”属性，即当元素宽度：0;时，元素的宽度由文字/图片决定。

文字最小宽度原则：

1.东亚文字（如中文），最小宽度是每个汉字的宽度，如例子所示。

2.西文，由特定的连续的英文字符单元决定，一般终止于空格，短横线，问号及其他非英文字符等，可以自己修改代码感受一下（可以用字符：盈亏所有;实现每一个字符都是最小单位）。

3.图片就是图片宽啦。

此部分更深层次知识涉及宽度：汽车;及内部尺寸与流体特性（都是张老师的专业术语），感兴趣可以自行查阅。

PS（一小部分读后感）：可能你会觉得整个职业生涯中都不会有这样的需求，常用的效果我们都能实现，知道这个特性有什么用其实这只是一个小小的例子，来让读者明白他的效果，真正的意义在于你明白整个宽度的特性之后（哎），你的代码会更精炼，可读性强，可维护性强...整体来说就是代码优化，提高开发效率。