使用flex布局时省略号不显示

最新推荐文章于 2024-07-16 18:15:42 发布

战南城

最新推荐文章于 2024-07-16 18:15:42 发布

阅读量1k

点赞数

分类专栏：个人笔记，不喜勿喷！！

本文链接：https://blog.csdn.net/qq_29948297/article/details/108354780

版权

个人笔记，不喜勿喷！！专栏收录该内容

329 篇文章 2 订阅

订阅专栏

代码伺候：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.outer{
				display: flex;
			}
			.test{
				flex: 1;
				min-width: 0;
			}
			.inner{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="test">
				<div class="inner">
					fkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklhfkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklhfkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklhfkdlhasfsafhlsa;fashf;sfkjsdahlflskjfdhslkfhasklhkaslfhkjsafhksalhfskahfjklashjfklsahjflksahjfklsahfkjshajfklhsjaklhdsjkfhaskldhsjklh
				</div>
			</div>
		</div>
	</body>
</html>

尝试删除min-width，发现省略号不显示

原因：test被子元素inner无限撑开

其他的解决方法：用width: 0;或者overflow:hidden;代替min-width;

参考博客：https://www.cnblogs.com/BlackStorm/p/6793170.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

战南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用flex布局时省略号不显示

代码伺候：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .outer{ display: flex; } .test{ flex: 1; ...
复制链接

扫一扫

专栏目录