css如何使超出文字隐藏，鼠标悬浮时查看隐藏内容第一次写文章，记录成长(^o^)/~(^o^)/~(^o^)/~第一次先

第一次写文章，记录成长 (^o^)/~(^o^)/~(^o^)/~

第一次先写个关于css方面的干货

以下是HTML代码块


<body>

<p>把光标移动到下面两个 div 上，就能够看到全部文本。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>

<style> 
div.test
{
white-space:nowrap; //强制文字不换行
width:20px; 
overflow:hidden; 
border:1px solid #000000;
}

div.test:hover
{
overflow:visible;
}
</style>

未悬浮时：

鼠标悬浮时样式：

这个 div 使用 "text-overflow:clip"：

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

未悬浮时：

鼠标悬浮时：

其中text-overflow属性是文字隐藏的样式，有三种，分别为：ellipsis隐藏部分显示为省略号， clip为修剪文本（具体效果见上图）,string可以把隐藏部分自定义任意字符串替换（仅限火狐浏览器使用），这里string属性就暂不介绍了(没有安装火狐o(╥﹏╥)o ,我喜欢用Chrome，你们呢? ）

友情链接：www.w3school.com.cn/cssref/pr_t…