文本溢出打点显示

原创

已于 2022-10-29 16:39:36 修改 · 630 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2022-03-23 20:48:40 首次发布

前言：文本溢出打点的代码总是忘记，特意在此记录一下

单行文本溢出打点

先看效果：

再放代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
	        p{
				width: 300px;
				height: 20px;
				line-height: 20px;
				border: 1px solid black;
				white-space: nowrap;   /* 使文本溢出不换行*/
				overflow: hidden;  /* 溢出部分砍断隐藏 */
				text-overflow: ellipsis;    /* 溢出部分打点展示*/
			}
    </style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis quasi sint nostrum veniam saepe mollitia dolorem alias aspernatur explicabo au