html - css布局问题

问题描述

问 题

外层用div包裹，里面是<p>,宽度都是auto,我想要的效果是，当缩小窗口是，绿色背景的<p>不动，超出的部分隐藏，请问下，这个该怎样实现？谢谢

我现在做的是移动端，各个宽度自适应，1、2的内容不固定，所以宽度设的auto，想实现如图的效果，2里的内容overflow：hidden；但是不要让2挤到下面去

解决方案

是用于移动端，而且两部分文字都是单行的话，这里用flex弹性盒比较合适。参考代码：

<div class="box" style="width: 150px;">
    <div class="part-1">part1语句</div>
    <div class="part-2">part2语句很长很长需要截断的情况</div>
</div>
 <div class="box" style="width: 250px;">
    <div class="part-1">part1语句</div>
    <div class="part-2">part2语句很长很长需要截断的情况</div>
</div>
 <div class="box" style="width: 350px;">
    <div class="part-1">part1语句</div>
    <div class="part-2">part2语句很长很长需要截断的情况</div>
</div>
 <div class="box" style="width: 250px;">
    <div class="part-1">part1语句也比较长的情况</div>
    <div class="part-2">part2语句很长很长需要截断的情况</div>
</div>

.box{
    display: flex;
    border: 1px #a14 dashed;
    margin-bottom: 10px;
    white-space: nowrap;
    font-size: 12px;
}
.part-1,
.part-2{
    padding: 5px 10px;
}
.part-1{
    background: #8095D1;
    color: #fff;
}
.part-2{
    flex: 1;
    margin-left: 10px;
    background: #ADFF2F;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

对应效果是：

其中的要点是，part-2加上flex: 1;以利用剩余空间，同时overflow: hidden;做截断。white-space: nowrap;以保证文字不换行。

这里只写了最新的flex代码，建议实际使用时再增加一些旧版flex的兼容代码。

这篇关于html - css布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！