【任务六里左边的文字进行缩放后发现无法出现省略号 _属性】

任务六里左边的文字进行缩放后发现无法出现省略号
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
属性
详细描述
截图
代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="task6.css">
</head>

<body>
    <header>
        <div class="box">
            <!-- 菜单盒子 -->
            <button class="menu" onclick="location.href='6.html'">找雇主</button>
            <button class="submenu">找护工</button>
            <button class="icon"></button>
            <!-- 导航盒子 -->
        </div>
        <div class="box1">
            <!-- 下拉框外部盒子 -->
            <div class="ddb">
                <!-- drop-down-box的缩写 -->
                <div class="box2">
                    <!-- 第一个下拉框外部盒子 -->
                    <span class="site">所在地</span>
                    <div class="dropdown-content">
                        <!-- 下拉框 -->
                        <p class="ddb1">1</p>
                        <p class="ddb1">2</p>
                        <p class="ddb1">3</p>
                    </div>
                    <span class="triangle"></span>
                    <!-- 倒三角形 -->
                </div>
            </div>
            <div class="ddb">
                <!-- drop-down-box的缩写 -->
                <div class="box3">
                    <!-- 第二个下拉框选项盒子 -->
                    <span class="rad">食宿</span>
                    <!-- room and board缩写 -->
                    <div class="dropdown-content">
                        <!-- 下拉框 -->
                        <p class="ddb1">1</p>
                        <p class="ddb1">2</p>
                        <p class="ddb1">3</p>
                    </div>
                    <span class="triangle1"></span>
                </div>
            </div>
            <div class="ddb">
                <!-- drop-down-box的缩写 -->
                <div class="box4">
                    <!-- 第二个下拉框选项盒子 -->
                    <span class="cdt">病人情况</span>
                    <!-- condition的缩写 -->
                    <div class="dropdown-content">
                        <!-- 下拉框 -->
                        <p class="ddb1">1</p>
                        <p class="ddb1">2</p>
                        <p class="ddb1">3</p>
                    </div>
                    <span class="triangle2"></span>
                    <!-- 倒三角形 -->
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="menu-bar">
            <!-- 菜单选项1 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">25元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar">
            <!-- 菜单选项2 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">35元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar">
            <!-- 菜单选项3 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">45元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar">
            <!-- 菜单选项4 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">45元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
        <div class="menu-bar5">
            <!-- 菜单选项5 -->
            <div class="menu-bar1">
                <!-- 菜单选项内部盒子 -->
                <span class="icon1"></span>
                <!-- 日期雪碧图 -->
                <span class="Sd">服务日期</span>
                <!-- Service date的缩写 -->
            </div>
            <div class="menu-bar2">
                <!-- 菜单选项内部盒子2 -->
                <p>2015-7-5 至 2015-7-12</p>
                <div class="box5">
                    <!-- 时间箭头盒子 -->
                    <span class="price">45元/小时</span>
                    <span class="ra"></span>
                    <!-- right arrow右边箭头的缩写 -->
                </div>
            </div>
            <div class="tab">
                <!-- The address box的缩写 -->
                <span class="icon2"></span>
                <!-- 地址雪碧图 -->
                <span class="location">北京.通州.果园</span>
                <!-- 地址类名字 -->
            </div>
        </div>
    </main>
    <footer>
        <div class="bottom-menu">
            <!-- 底部菜单栏 -->
            <span class="icon4"></span>
            <!-- 首页雪碧图 -->
            <button class="home-page">首页</button>
            <!-- 首页 -->
        </div>
        <div class="bottom-conten">
            <!-- 中心圆 -->
            <button class="icon5"></button>
            <!-- 中心的雪碧图 -->
        </div>
        <div class="right-option">
            <!-- 右边选项 -->
            <span class="icon6"></span>
            <!-- 右边的雪碧图 -->
            <button class="my">我的</button>
        </div>
    </footer>
</body>

</html>
html {
    font-size: 62.5%
}

body {
    font-size: 1.6rem;
    margin: 0;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}

.box {
    height: 4.4rem;
    background-color: #5FC0CD;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu {
    margin-right: -5px;
    font-size: 1.7rem;
    width: 7.2rem;
    height: 3.5rem;
    color: white;
    background-color: #55A8B3;
    border: 1px solid #55A8B3;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.submenu {
    font-size: 1.7rem;
    width: 7.2rem;
    height: 3.5rem;
    color: #5FC0CD;
    background-color: white;
    border: 1px solid white;
    border-radius: .5rem;
    z-index: 1;
}

.icon {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    width: 2.1rem;
    height: 2.2rem;
    background-position: -10px -10px;
    zoom: 0.5;
    position: absolute;
    border: 0;
    top: 1.1rem;
    right: 1.5rem;
}

.box1 {
    display: flex;
    height: 4rem;
    border-bottom: 1px solid #E1E5E7;
    text-align: center;
    background: white;
}

.ddb {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100px;
}

.box2 {
    height: 4rem;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.site {
    color: #999999;
    font-size: 1.4rem;
    line-height: 4rem;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #AFBAC0;
    position: absolute;
    top: 1.8rem;
    right: 6.6px;
}

.ddb1 {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    display: block;
}

.dropdown-content {
    display: none;
    text-align: center;
    background-color: #5FC0CD;
    min-width: 1.2rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    top: 3.65rem;

}

.ddb1:hover {
    background: #AFBAC0;
}

.ddb:hover .dropdown-content {
    display: block;
}

.box3 {
    height: 4rem;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-grow: 1;
    text-align: center;
    border-left: 1px solid #E1E5E7;
    border-right: 1px solid #E1E5E7;
}

.rad {
    line-height: 4rem;
    color: #999999;
    font-size: 1.4rem;
    flex-grow: 1;
}

.triangle1 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #AFBAC0;
    position: absolute;
    top: 1.8rem;
    right: 7.4px;
}

.box4 {
    height: 4rem;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-flow: 1;
    border-left: 0;
    border-right: 0;

}

.cdt {
    color: #999999;
    font-size: 1.4rem;
    line-height: 4rem;
}

.triangle2 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #AFBAC0;
    position: absolute;
    top: 1.8rem;
    right: 3.7px;
}

main {
    margin-top: 93px;
    margin-bottom: 69px;
}

.menu-bar {
    height: 9rem;
    border-bottom: 1px solid #E1E5E7;
    position: relative;
    line-height: 2.4rem;
}

.menu-bar1 {
    display: inline-block;
}

.icon1 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -72px -74px;
    width: 2.2rem;
    height: 2.2rem;
    zoom: 0.5;
    position: absolute;
    top: 1.45rem;
    left: 1.5rem;
    display: inline-block;
}

.Sd {
    color: #5D5D5D;
    margin-left: 3.45rem;
    vertical-align: super;
    display: inline-block;
    margin-top: 1rem;
}
.menu-bar2{
   
}
p {
    margin: 0;
    padding: 0;
    margin-left: 3.4rem;
    font-size: 1.4rem;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box5 {
    display: inline-block;
    margin-right: 1.6rem;
}

.price {
    font-size: 1.5rem;
    color: #E63B0E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 100%;
}

.ra {
    display: inline-block;
    border-right: 3px solid;
    border-bottom: 3px solid;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    color: #5FC0CD;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon2 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -138px -10px;
    width: .85rem;
    height: 1.15rem;
    display: inline-block;
    top: 6.25rem;
    margin-left: 1.6rem;
    zoom: 0.5;
}

.location {
    color: #999999;
}

.option {
    height: 3.45rem;
    position: relative;
}

.icon3 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -72px -74px;
    width: 2.2rem;
    height: 2.2rem;
    zoom: 0.5;
    top: 1.65rem;
    left: 1.6rem;
    position: absolute;
}

.Sd2 {
    color: #5D5D5D;
    margin-left: 3.45rem;
    vertical-align: super;
    display: inline-block;
    margin-top: 1.2rem;
}

footer {
    height: 4.95rem;
    border-top: 1px solid #E1E5E7;
    background-color: #F8FAFB;
    display: flex;
    justify-content: space-around;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.icon4 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -72px -10px;
    width: 2.3rem;
    height: 2rem;
    display: block;
    zoom: .5;
    margin: auto;
    margin-top: .6rem;
}

.home-page {
    font-size: 10px;
    color: #5FC0CD;
    border: 0;
    background-color: #F8FAFB;
}

.bottom-conten {
    width: 4.7rem;
    height: 4.7rem;
    background-color: #5FC0CD;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.icon5 {
    background: url(./css_sprites.png) no-repeat;
    background-position: -72px -74px;
    width: 2rem;
    height: 2rem;
    zoom: .5;
    display: block;
    margin-top: 1.35rem;
    margin-left: 1.5rem;
    border: 0;
}

.icon6 {
    background: url(./css_sprites\ \(1\).png) no-repeat;
    background-position: -10px -74px;
    width: 2.1rem;
    height: 2.1rem;
    display: block;
    zoom: .5;
    margin: auto;
    margin-top: .45rem;
}

.my {
    font-size: 10px;
    color: #999999;
    border: 0;
    background-color: #F8FAFB;
}

.menu-right {
    margin: 0 0 0 -5px;
}
.date{
    margin: 0;
    padding: 0;
    margin-left: 3.4rem;
    font-size: 1.4rem;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
编辑于2024-04-16
时间排序
热门排序
[深圳|荣耀师兄]JS-张志安
0

在其它坑乎里，已经有其他师兄回答得非常仔细了
无非要满足几个条件：
1.文字超出容器宽度时，文字被隐藏的文字用省略号代替。所以要保证文本不换行。
2.行内元素要显示省略号，需要先转化成块状元素或行内块元素。
3.代码white-space:noworp;(强制文字不换行)，overflow:hidden;(文字溢出隐藏)，一起使用。

查看全部>

编辑于2019-11-18
去第页