【web前端(二十二)】html_over-flow(溢出)

最新推荐文章于 2022-04-05 18:06:09 发布

_浮舍_

最新推荐文章于 2022-04-05 18:06:09 发布

阅读量1.5w

点赞数 1

分类专栏： Java

本文链接：https://blog.csdn.net/LED_of_Java/article/details/98986809

版权

Java 专栏收录该内容

118 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>over-flow(溢出)</title>
		<style>
			li{
				width: 100px;
				height: 20px;
				background-color: #87CEEB;
				border: 1px solid #000;
				white-space:nowrap;
				overflow:hidden;
				text-overflow: ellipsis;
			}
			
			.c1{
				width: 100px;
				height: 20px;
				background-color: #87CEEB;
				border: 1px solid #000;
				/*折行*/
				/*white-space: normal;*/
				overflow:hidden;
				/*文字有溢出，可用ellipsis实现省略。*/
				text-overflow: ellipsis;
			}

		</style>
	</head>
	<body>
		<div class="c1">asdfghjklasdfghjklasdffghjklasdfghjkl</div>
		<ur>
			<li>北三环大明宫建材家居博览中心 qwer tyui opas dfgh jklz xcvb nm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
			<li>北三环大明宫建材家居博览中心qwertyuiopasdfghjklzxcvbnm</li>
		</ur>
	</body>
</html>

_浮舍_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web前端(二十二)】html_over-flow(溢出)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>over-flow(溢出)</title> <style> li{ width: 100px; height: 20px; background-co...
复制链接

扫一扫