利用盒子的首选最小宽度来构建图形

最新推荐文章于 2021-03-16 21:51:54 发布

杨九日

最新推荐文章于 2021-03-16 21:51:54 发布

阅读量213

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42835377/article/details/95881146

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

将盒子的display属性设为inline-block，因为设为inline-block使其具有收缩与包裹性，可以使盒子宽度随着内部元素大小而变大变小，当然，首先将盒子width写为0；利用伪选择器来向盒子内添加元素，盒子内规则：东亚文字（如汉字）最小宽度为每个汉字的宽度，而西方字符，连续的英文字符显示，但终止与空格或其他非英文字符。
代码如下：

<style type="text/css">
		.e,
		.f{
			display:inline-block;
			width:0;
			font-size：14px;
			line-height:18px;
		  	margin: 70px;
		  	color: #fff;

		}
		.e:before{
			outline:  2px solid #cd0000;
			font-family: Consolas, Monaco, monospace;
			content: "loveyou你loveyo你loveyou";
		}
		
		.f:after{
			outline:  2px solid #cd0000;
			font-family: Consolas, Monaco, monospace;
			content:"loveyou你lovey你你"
		}
		

	</style>
</head>
<body>
		<span class="e"></span>
		<span class="f"></span>
</body>

我又用了after选择器与用before选择器并无差别。
效果图如下：
在这里插入图片描述
图形E对应的文字应该是
loveyou
你
loveyo
你
loveyou
图形F同理。

杨九日

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用盒子的首选最小宽度来构建图形

将盒子的display属性设为inline-block，因为设为inline-block使其具有收缩与包裹性，可以使盒子宽度随着内部元素大小而变大变小，当然，首先将盒子width写为0；利用伪选择器来向盒子内添加元素，盒子内规则：东亚文字（如汉字）最小宽度为每个汉字的宽度，而西方字符，连续的英文字符显示，但终止与空格或其他非英文字符。代码如下：<style type="text/css"...
复制链接

扫一扫