html - 动态标题中的 CSS 剪辑文本

Question

我一直在尝试使用 text-overflow:ellipsis 获取动态标题来剪辑文本，但我似乎无法让我需要的一切正常工作。

看看我们最初在这里实现的内容 https://dl.orangedox.com/selZdE请注意，文件名扩展到控件之上，这就是我们试图通过使用诸如文本溢出 css 属性之类的东西来解决的问题。

这是我试过的

.toolbar {
              width: 100%;
              height: 45px;
              background-color: #fff;
              border-bottom: 1px solid #d5d5d5;
            }
            
            .middle {
              text-align: center;
            }
            
            .left {
                text-align:left;
            }
            
            .right {
                text-align:right;
            }
            
            .border {
                border:thin solid silver;
            }
            
            .clip {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            
            #float > div {
                width:32%;
                height:100%;
            }
            
            #inline > div {

              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 0;
              overflow: visible;
              margin-top: 3px;

            }
            
            .hide {
                display:none;
            }
            
            .float-right {
                float:right;
            }
            
            .float-left {
                float:left;
            }

    <div id='inline' class="toolbar">
        <div class="inline left clip">
            Some really really really really really really really really really really really really really long line of text.
        </div>
        <div class="inline middle">Middle Stuff</div>
        <div class="inline right">Right Stuff</div>
    </div>
    
    <br>
    <hr>
    <h3>Second Attempt</h3>
    <br>
 
    <div id='float' class="toolbar">
        <div class="border left float-left clip">
            Some really really really really really really really really really really really really really long line of text.
        </div>
        <div class="border middle float-left">Middle Stuff</div>
        <div class="border right float-right">Right Stuff</div>
    </div>

    <br>
    <hr>
    <strong>without the middle</strong>
    <br>
 
    <div id='float' class="toolbar">
        <div class="border left float-left clip">
            Some really really really really really really really really really really really really really long line of text.
        </div>
        <div class="border middle float-left hide">Middle Stuff</div>
        <div class="border right float-right">Right Stuff</div>
    </div>

看看我在上面尝试过的尝试

1. 定位正确，删除中间或右侧部分允许左侧部分“增长”，但是文本在中间区域溢出(我们已经实现的
2. 左框现在限制为屏幕的 33%，允许控制文本溢出但是
3. 如果中间框不存在，则左侧框不会自动调整大小以超过此可用空间(因为它已明确设置为 33%)

关于如何使用像这样的溢出文本和控件更好地构造此 header 有什么想法吗？

Answer 1

编辑后的答案:看起来您需要在没有绝对定位的情况下为左侧 div 设置宽度。然而，其他两个真的可以设计风格。最终我到达了那里，我相信这就是您正在寻找的最终结果。

    #div1
    {
      display: inline-block;
      width: 40%;
      white-space: nowrap;
      overflow: ellipsis;
    }

    #div2 
    {
      position: relative;
      width: 100px;
      background: yellow;
      top: -20px;
      margin: 0 auto;
    }

    #div3 
    {

      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 20px;
      overflow: visible;
      margin-top: 5px;
    }

jsfiddle