Question

我一直在尝试使用文本溢出：省略号来获取动态标题来剪辑文本，但我似乎无法使所有内容正常运行。

看一看我们最初在此处实施的内容https://dl.orangedox.com/selZdE请注意，文件名扩展到控件上，这是我们尝试使用文本溢出等功能修复的内容css property。

这是我尝试过的

＆＃13;

.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;
            }

＆＃13;

    <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>

＆＃13;

看看我上面尝试过的尝试

定位是正确的，删除中间或右侧部分允许左侧部分'＆＃34;成长＆＃34;但是文本在中间区域溢出（我们已经实施的内容
左框现在限制在屏幕的33％，允许控制文本溢出但是
如果中间框不存在，则左框不会自动调整大小超过此可用空间（因为它明确设置为33％）

有关如何使用溢出文本和＆amp ;;更好地构建此标头的任何想法像这样的控件？

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

动态标题中的CSS剪辑文本

1 个答案: