css - 如何裁剪具有动态宽度、流畅布局的文本？

Question

当元素的宽度是动态的时如何裁剪文本？

当元素的宽度固定时，可以裁剪文本：

.my-class {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但是当宽度是动态的时候怎么办呢？

真实示例 - 标题浮动在左侧，工具栏浮动在右侧的应用程序标题：

标题应该占据所有空闲位置，但不能更多：

如何在这样的动态标题中裁剪文本？

实时播放代码http://cssdeck.com/labs/fbe2t2qo/0

Answer 1

您可以使用 CSSmin-width和max-width属性，这将为您完成工作

.my-class {
  min-width: 100px;   <----Here
  max-width: 500px;   <----Here
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

事实证明它实际上是可以做到的，变化是：

• 首先在html中设置工具栏并使其向右浮动。
• 在标题上设置文本溢出。

HTML

<div class='header'>
    <div class='header-toolbar'>
        <button>Create</button>
    </div>
    <div class='header-title'>
        Very very very very very long very very very long title
    </div>

    <div class='clearfix'></div>
</div>

CSS

.header, .header-title, .header-toolbar {
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
}

.header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-toolbar {
    float: right;
}

.clearfix {
    clear: both;
}

代码http://cssdeck.com/labs/na24g9nf/0

附言

这不是我的回答，这个人回答了这个问题http://www.sql.ru/forum/memberinfo.aspx?mid=114453在这个线程http://www.sql.ru/forum/actualthread.aspx?tid =979934

Answer 3

如果您不想使用浮点数，请查看以下带有表格单元的解决方案。

此解决方案使用 CSS 中的“显示：表格”来实现 100% 流畅的文本溢出省略号。不需要浮动！

HTML：

<div class='header'>
  <div class='header-title'>
     <div class="fluid-ellipsis-container">
        <div class="fluid-ellipsis-content">
          This solution uses 'display: table' in CSS for 100% fluid text-overflow ellipsis. <strong>NO FLOATS needed!</strong> It's important to note that this works because of the browser's process of calculating the 'table-cell' width within a fixed layout scheme of the parent 'table' div, in effect creating a "fixed" table-cell width on each browser reflow/paint, hence applying the ellipsis property without dynamic width issues.
        </div>                    
     </div>      
  </div>
  <div class='header-toolbar'>
    <button>Create</button>
  </div>
</div>

CSS：

.header, .header-title, .header-toolbar {
    box-sizing: border-box;
    border: 1px solid rgba(150,150,150,0.5);
    padding: 5px;
}
.header{
    display: table;
}
.header-title {
    display: table-cell;
    vertical-align:middle;
    width: 85%;
}
.header-toolbar {
    display: table-cell;
    width: 15%;
    text-align: center;
    vertical-align: middle;
}
.fluid-ellipsis-container{
    display:table;
    table-layout: fixed;
    width: 100%;
}
.fluid-ellipsis-content{
    display: table-cell;
    vertical-align: middle;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}    

重要的是要注意，这是因为浏览器在父 'table' div 的固定布局方案中计算 'table-cell' 宽度的过程，实际上在每个浏览器 reflow 上的单元格上创建一个“固定”宽度/油漆调整大小，因此应用省略号属性而没有动态宽度问题。

http://cssdeck.com/labs/j5zk46la