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

Posted 2023-02-25

【中文标题】如何裁剪具有动态宽度、流畅布局的文本？

【英文标题】：How to crop text with dynamic width, fluid layout?

【发布时间】：2012-10-29 20:53:57

【问题描述】：

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

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

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

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

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

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

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

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

【参考方案1】：

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

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

【讨论】：

但我不知道max-width - tolbar 有不同的宽度（有时是一个，有时是多个按钮），我不知道还有多少空间用于标题。

@AlexeyPetrushin 比使用你的宽度为auto

谢谢，但似乎不适用于auto cssdeck.com/labs/nhrs0pwd/0

@AlexeyPetrushin 你必须给出一个特定的宽度，否则将 div 向左浮动有什么用？

@mr-alien 我只想要一个标题在左侧，工具栏在右侧的标题。工具栏可能有不同数量的按钮，标题应该占用所有可用空间，但不会更多。如果没有浮动（或表格），我不知道该怎么做。

【参考方案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回答了

【参考方案3】：

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

此解决方案使用 CSS 中的“display: table”来实现 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' 宽度的过程，实际上是在每个单元格上创建一个“固定”宽度浏览器回流/绘画调整大小，因此应用省略号属性没有动态宽度问题。

http://cssdeck.com/labs/j5zk46la

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

啊，谢谢你告诉我。如您所见，我在这里是全新的！