今天又遇到一个问题，文字太长超出div。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.contain{
width:300px;
height:300px;
border:solid;
}
.one
{
width:50px;
height:50px;
margin:50px;
padding:50px;
border:red solid;
background-color:pink;
}
</style>
</head>
<body>
<div class="contain">
<div class="one">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>
</div>
</body>
</html>
如图
那么如何解决这个问题呢？
在样式表中添加如下代码
.one{
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis; /*以省略号...显示*/
white-space: nowrap; /*强制不换行*/
}
之后效果
那么怎么才能看到被隐藏的文字呢？
说明
Overflow是检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
下面来看一下overflow的属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
overflow:scroll;//设置为滚动条
image.png
要想看到全部文字，可以通过移动滚动条实现,这个问题算是解决了。
看一下overflow的其他属性
Overflow-x指定是否要剪辑溢出了元素内容区的左/右边缘的内容.
Overflow-y指定是否要剪辑溢出了元素内容区的顶部/底部边缘的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;/*剪辑的左/右边缘的内容.*/
overflow-y:hidden;/*剪辑的上/下边缘的内容.*/
}
</style>
</head>
<body>
<div>
<p style="width:140px">
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</p>
</div>
</body>
</html>
以上代码效果
overflow-x overflow-y的语法
| 值 | 描述 |
|---|---|
| visible | 不裁剪内容，可能会显示在内容框之外。 |
| hidden | 裁剪内容 - 不提供滚动机制。 |
| scroll | 裁剪内容 - 提供滚动机制。 |
| auto | 如果溢出框，则应该提供滚动机制。 |
| no-display | 如果内容不适合内容框，则删除整个框。 |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 |
注意：无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。
原因：英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。所以会出现我上面字母超出div的情况，但是中文就不一样了
