div或p标签单行和多行显示方法以及(html)当鼠标移上显示信息

1.单行显示（以h1为例）
代码：
< !DOCTYPE html>
< html lang=“en”>

< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style>
h1 {
background: red;
max-width: 800px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
< /style>
< /head>
< body>
< div class=“right”>
< h1>vghhsbaygdxsajxhjsaxhsgtxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx< /h1>
< /div>
< /div>

< /body>

< /html>
结果：

注意:

不要设置高度

可以不用max-width,用width也行，反正要设置宽度

css加粗部分属性一定要有

2.多行显示（以p标签为例）
代码：
< !DOCTYPE html>
< html lang=“en”>

< head>
< meta charset=“UTF-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document< /title>
< style>
p {
width: 100px;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
< /style>
< /head>

< body>
< p>defbhhgggggggggggggggggggggggggggggggggggggggggggggg< /p>

< /html>
结果：

注意:

不要设置高度

可以不用max-width,用width也行，反正要设置宽度

css加粗部分属性一定要有

3.鼠标移上显示信息

需要用到title属性，title里的内容即为鼠标移上时的内容
详细信息：https://www.w3school.com.cn/tags/att_standard_title.asp
————————————————
版权声明：本文为CSDN博主「huanxianxianshi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huanxianxianshi/article/details/105829014