老师，为什么我这个不一行显示，出现省略号呢？
来源：2-7 编程练习
慕尘埃191116
2021-02-24 18:37:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box-container{
margin: 20px auto;
padding: 30px 20px;
width: 250px;
border: 1px solid #000;;
}
.box{
display:flex;
border-bottom:1px dotted #000;
}
.text-box{
/* 溢出隐藏 */
overflow:hidden;
/* 显示省略号 */
text-overflow:ellipsis;
/* 不换行 */
flex-wrap:nowrap;
}
</style>
</head>
<body>
<div class="box-container">
<p class="box"><span class="text-box">支持的特性写支持的写法不支持的特性，写兼容性写法。</span></p>
<p class="box"><span class="text-box">在没有人为指定固定宽度时，父容器有固定宽度，即有block的属性，也有flex的属性。有了这个属性，盒子自动沿主轴排列。</span></p>
<p class="box"><span class="text-box">Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"</span></p>
<p class="box"><span class="text-box">为了兼容不同浏览器，这里见意都写上。在width=device-width 自动调整成视口的宽 initial-scale=1.0 缩放比例为</span></p>
<p class="box"><span class="text-box">user-scalable=no 用户缩放,no为不允许,yes为允许. user-scalable=no相当于 initial-scale=1.0(初始缩放比)</span></p>
</div>
</body>
</html>
1回答
-
好帮手慕言
2021-02-24
同学你好，有一个属性书写的不对，修改如下：
祝学习愉快~
0
相似问题
回答 1
回答 1