问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css布局问题

头像
zhushao
    273106899

    图片描述

    图片描述

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

    图片描述

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

    htmlcss
    阅读 3.2k
    4 个回答
    得票最新
    头像
    EdwardUp
      5.9k346
      ✓ 已被采纳

      是用于移动端，而且两部分文字都是单行的话，这里用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;
}

      对应效果是：

      clipboard.png

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

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

      头像
      lavyun
        1.1k4919

        教你一个很简单的方法吧，先设一个宽度为100%的盒子，盒子内部再有一个宽度很大的盒子像这样：

        <div class="body" style="width:100%">
    <div class="box" style="width:10000px;">
            
    </div>
</div>

        然后让外部的盒子overflow为hide，内部的盒子就是一个很长的盒子，然后就可以写代码了

        <html>

<head>
    <meta charset="utf-8">
    <style>
        .body {width: 100%;overflow: hidden;color: #fff} 
        .box { width: 10000px;height: 30px;overflow: hidden;} 
        .tag {background: green;}  
        .text {background: red;margin-left:20px;}
    </style>
</head>

<body>
    <div class="body">
        <div class="box">
            <span class="tag">不固定的小标签</span>
            <span class="text">不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本不固定的文本</span>
        </div>
    </div>
</body>

</html>

        效果就是这样的：

        clipboard.png

        clipboard.png

        头像
        stardew
          6.1k41633

          <div> position: relative;
          <p> position: absolute;
          再微调一下就好了

          头像
          shockw4ver
            1k1311

            给div一个min-width:

            div {
    min-width: 400px;
}

p {
    width: auto;//假设这段字的宽度为300px
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;//超出部分用省略号表示
}

            这样当窗口缩放到300px宽的时候div就不会再缩小了

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题