Question

如果元素的宽度是动态的，如何裁剪文本？

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

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

但是当宽度是动态时如何做呢？

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

enter image description here

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

enter image description here

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

现场直播的代码http://cssdeck.com/labs/fbe2t2qo/0

Answer 1

您可以使用CSS min-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

P.S。

这不是我的回答，这个帖子http://www.sql.ru/forum/memberinfo.aspx?mid=114453中的这个人http://www.sql.ru/forum/actualthread.aspx?tid=979934回答了这个问题。{/ 3>

Answer 3

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

此解决方案在CSS中使用'display：table'作为100％流畅文本溢出省略号。不需要FLOATS！

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'宽度的过程，实际上在每个单元格上创建一个“固定”宽度浏览器重排/绘制调整大小，因此应用省略号属性而没有动态宽度问题。

http://cssdeck.com/labs/j5zk46la

如何裁剪动态宽度，流畅布局的文本？

3 个答案: