【CSS】如何设置文字在一排显示且有省略号_css中如何设置文字一排-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42376054/article/details/98473110

展示一下最后的效果图：

在这里插入图片描述
献上全部文本：会议指出，上海要进一步“发挥龙头带动作用”，苏浙皖要“各扬所长”，以更加奋发有为的精神状态推动长三角一体化发展不断取得新成效、新突破，...共计300多字。如上图所示的情况，大多用于在新闻类网站排版，那么这是如何做到的呢？

解决思路

我们应该有一个基本思路：将所有文字排成一排、隐藏掉超出容器的文字、超出文字展示为省略号。
思路翻译成代码：white-space: nowrap、overflow: hidden、text-overflow: ellipsis

值得注意的是：这三行代码的确是能够解决问题，但需要知道一个常识问题，对于这个容器，我们必须是要规定一个width的属性值的。否则是看不出来效果的。

最后，放上我的核心代码。

<style type="text/css">
		* {
			margin: 0 auto;
			padding: 0;
		}
		div{
			height: 200px;
			width: 200px;
			border: 1px solid red;
		}
		p{
			/* 首先必须得让它隐藏，必填属性值对 */
			overflow: hidden;
			/* 强制在一排显示 */
			white-space: nowrap;
			/* 当文本溢出时，显示省略标记 */
			text-overflow: ellipsis;
		}
	</style>
</head>

<body>
	<div>
		<p>会议指出，上海要进一步“发挥龙头带动作用”，苏浙皖要“各扬所长”，以更加奋发有为的精神状态推动长三角一体化发展不断取得新成效、新突破，努力将长三角地区建设成为全国贯彻新发展理念的引领示范区、全球资源配置的亚太门户、具有全球竞争力的世界级城市群。会议期间，有关方面就组建长三角地区一体化发展投资基金、5G先试先用、环保领域信用联合奖惩、打通省际断头路、共建G60科创走廊、推进“人工智能+法院”、申宁杭合四城轨交扫码便捷通行、推进“互联网+”医联体、协同做好中国国际进口博览会服务保障工作、推进工业互联网平台集群联动、建立协同优势产业基金等一批合作项目进行了现场签约。风从海上来，改革正当时。四十年来，长三角五城发展有目共睹，且各自走出了有特色的发展道路。转型发展，改革不止步。这五座城市在长三角一体化的大背景下未来将再做突破、再做发展。</p>
	</div>

</body>