如何使用按钮一个接一个地截断/缩小跨度，而不是一次全部? [英] How to truncate/shrink spans with button bettwen them one by one, not all at once?

查看：26
本文介绍了如何使用按钮一个接一个地截断/缩小跨度，而不是一次全部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有一个问题，需要将span内的元素一个一个缩小.所以，根据图片，首先完全缩小span - AfterText，而span - BeforeText和button - Click me!是完全可见的.当 span-AfterText 完全省略时，button - Click me! 开始省略(它的文本)并且 span - BeforeText 仍然是完全可见.当 button - Click me! 完全省略时，span - BeforeText 开始省略.

如何实现这个目标?只能用css吗?问题不在于大小写，我只有跨度.问题是由于按钮，它保持在跨度之间并且不像跨度那样表现(省略号/收缩).当按钮没有足够的空间完全可见时，它就会消失.

下面第一行的图片代表我所拥有的.第二行显示需要什么.

.project {显示:弹性；弹性方向:列；}/* 第一个盒子 */.盒子 {边距:20px；边框:3px纯红色；轮廓:3px 实心玫瑰棕色；填充:10px；宽度:220px；}.box__header {空白:nowrap；溢出:隐藏；文本溢出:省略号；}.box__btn {宽度:100%；边距:0 0 20px 0；空白:nowrap；溢出:隐藏；文本溢出:省略号；}.box__inside-box {边框:2px 纯蓝色；显示:弹性；对齐项目:居中；填充:10px；}.box__inside-box * {溢出:隐藏；文本溢出:省略号；空白:nowrap；}.box__btn-2 {弹性方向:行；边距:5px 5px；}/* 第二个盒子 */.box2 {边框:3px纯红色；轮廓:3px 实心玫瑰棕色；填充:10px；显示:内联块；宽度:220px；}.box2__header {空白:nowrap；溢出:隐藏；文本溢出:省略号；}.box2__btn {宽度:100%；边距:0 0 20px 0；空白:nowrap；溢出:隐藏；文本溢出:省略号；}.box2__inside-box {边框:2px 纯蓝色；显示:块；填充:10px；溢出:隐藏；文本溢出:省略号；空白:nowrap；}.box2__inside-box * {溢出:隐藏；文本溢出:省略号；空白:nowrap；}.box2__btn-2 {弹性方向:行；边距:5px 5px；}

<!-- 第一种情况--><div class="box"><div><h2 class="box__header">省略号一次</h2>
<div><button class="box__btn">点击我点击我点击我点击我点击我！</button>

<span class="box__inside-box"><span>BeforeText</span><button class="box__btn-2">点击我！</button><span>AfterText</span></span>

<!-- 第二种情况--><div class="box2"><div><h2 class="box2__header">省略号一一</h2>

<div><button class="box2__btn">点击我点击我点击我点击我点击我！</button>

<span class="box2__inside-box"><span>BeforeText</span><button class="box2__btn-2">点击我！</button><span>AfterText</span></span>

StackBlitz 示例

这个问题的真实情况是在表格内部，当列收缩并且行在按钮前后都有文本时.

解决方案

解决方案是将所有元素包裹在 flex 容器中:

.flex-container {显示:弹性；}

关键是操作诸如 flex-shrink、flex-grow 和 flex-basis 之类的 flex 属性.首先我们需要截断button 和AfterText.首先，我们再次将这些元素放在 .flex-container 中.然后，AfterText 获取类:

.first-to-shrink {弹性收缩:0；弹性增长:1；弹性基础:0；最小宽度:0；}

和 button 另一方面获得类:

.second-to-shrink {弹性收缩:1；弹性增长:0；}

在 AfterText 和 button 省略号缩小直到完成后，是时候让 BeforeText 缩小.首先，我们必须将 BeforeText 和带有 AfterText + button 的容器视为两个元素.所以，AfterText + button 得到 class first-to-shrink 和 BeforeText 得到 class .second-to-shrink.

此外，每个元素都需要这些属性来截断(省略号):

.truncate {溢出:隐藏；文本溢出:省略号；空白:nowrap；}

在first-to-shrink 类中是min-width: 0.在 flexbox 中允许截断是必要的.此功能的深入解释在 cssTricks.

这是stackblitz 解决方案的链接.

.box {最大宽度:210px；背景颜色:浅蓝色；}.flex 容器 {显示:弹性；对齐项目:居中；}.先收缩{弹性收缩:0；弹性增长:1；弹性基础:0；最小宽度:0；}.second-to-shrink {弹性收缩:1；弹性增长:0；}.截断{溢出:隐藏；文本溢出:省略号；空白:nowrap；}

 
<span class="flex-container"><span class="second-to-shrink truncate">BeforeText</span><span class="first-to-shrink flex-container"><button class="second-to-shrink truncate m-5">点击我！</button><span class="first-to-shrink truncate">AfterText</span></span></span>

There is an issue, in which it is needed to shrink elements inside span one by one. So, according to the image, first fully shrinks span - AfterText, while span - BeforeText and button - Click me! are fully visible. When the span-AfterText got fully ellipsis, the button - Click me! starts to ellipsis (its text) and the span - BeforeText still is fully visible. When button - Click me! is fully ellipsed, the span - BeforeText starts to ellipsis.

How to achieve that goal? Is it possible only with css? The problem is not with case, where I would have only spans. The problem is due to button, which is kept between spans and does not behave (ellipsis/shrink) like spans. Button will just dissapear, when it does not have enough room to be fully visible.

The image below in the first line represents what I have. Second line shows what is needed.

.project {
  display: flex;
  flex-direction: column;
}

/* first box */

.box {
  margin: 20px;
  border: 3px solid red;
  outline: 3px solid rosybrown;
  padding: 10px;
  width: 220px;
}

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

.box__btn {
  width: 100%;
  margin: 0 0 20px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box__inside-box {
  border: 2px solid blue;
  display: flex;
  align-items: center;
  padding: 10px;
}

.box__inside-box * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box__btn-2 {
  flex-direction: row;
  margin: 5px 5px;
}

/* second box */
.box2 {
  border: 3px solid red;
  outline: 3px solid rosybrown;
  padding: 10px;
  display: inline-block;
  width: 220px;
}

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

.box2__btn {
  width: 100%;
  margin: 0 0 20px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box2__inside-box {
  border: 2px solid blue;
  display: block;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box2__inside-box * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box2__btn-2 {
  flex-direction: row;
  margin: 5px 5px;
}

<div class="project">
  <!-- first case -->
  <div class="box">
    <div>
      <h2 class="box__header">Ellipsis all at once</h2>
    </div>
    <div>
      <button class="box__btn">Click me click me click me click me click me!</button>
    </div>

    <span class="box__inside-box">
<span>BeforeText</span>
    <button class="box__btn-2">Click me!</button>
    <span>AfterText</span>
    </span>
  </div>

  <!-- second case -->
  <div class="box2">
    <div>
      <h2 class="box2__header">Ellipsis one by one</h2>
    </div>
    <div>
      <button class="box2__btn">Click me click me click me click me click me!</button>
    </div>

    <span class="box2__inside-box">
  <span>BeforeText</span>
    <button class="box2__btn-2">Click me!</button>
    <span>AfterText</span>
    </span>
  </div>
</div>

Example on StackBlitz

The real case of this issue is inside table, when the column got shrink and row has text before and after button.

解决方案

The solution is to wrap all elements inside flex container:

.flex-container {
  display: flex;
}

The key thing is to operate on flex properties like flex-shrink, flex-grow and flex-basis. First we need to truncate button and AfterText. Firtly, we put these elements again inside .flex-container. Then, the AfterText gets class:

.first-to-shrink {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

and the button on the other hand gets class:

.second-to-shrink {
  flex-shrink: 1;
  flex-grow: 0;
}

After AfterText and button ellipsis shrink till it's done, it comes time for BeforeText to shrink. Firtly, we have to treat BeforeText and container with AfterText + button as two elements. So, AfterText + button gets class first-to-shrink and BeforeText gets class .second-to-shrink.

Moreover, each element needs these properties to truncate (ellipsis):

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

Inside the class first-to-shrink is min-width: 0. It is necessary to allow truncation inside flexbox. The deep explanation of this feature is on cssTricks.

Here's a link to a solution on stackblitz.

.box {
  max-width: 210px;
  background-color: lightblue;
}

.flex-container {
  display: flex;
  align-items: center;
}

.first-to-shrink {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.second-to-shrink {
  flex-shrink: 1;
  flex-grow: 0;
}

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

 <div class="box">
    <span class="flex-container">
  <span class="second-to-shrink truncate">BeforeText</span>

    <span class="first-to-shrink flex-container">
  <button class="second-to-shrink truncate m-5">Click me!</button>
  <span class="first-to-shrink truncate">AfterText</span>
    </span>

    </span>
  </div>

这篇关于如何使用按钮一个接一个地截断/缩小跨度，而不是一次全部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆