Question

我目前正在尝试创建某种标签组件。如果标签标签内的文本足够短以显示在内容div中，则一切正常。如果文本太长，则使用省略号缩短文本。但如果发生这种情况，x图标会浮出父div。

如何解决此问题，以便x保留在组件div 中，而将标签限制为修复大小？这背后的原因是，如果鼠标悬停在标签上，图标只会出现。否则标签应该一直到达右侧。我知道怎么做这个东西。目前唯一的问题是虚假显示的x图标。

.example {
  display: flex;
  flex-direction: column;
}

.component {
  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
}

.line {
    width: 2px;
    min-width: 2px;
    height: 30px;
    background-color: black;
    margin-top: 5px;
}

.content {
    height: 100%;
    width: 100%;
    padding: 7px 10px 7px 5px;
}

.label {
  line-height: 13px;
    font-size: 13px;
    height: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c4c7cc;
    width: 100%;
}

.icon {
    color: black;
    float: left;
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
}

<div class="example">
  Example with short Text
  <div class="component">
    <div class="line"></div>
    <div class="content">
      <div class=label>aaaaaaaa</div>
      <div class=label>bbbbbbbb</div>
    </div>
    <div class="icon">X</div>
  </div>
  
  <br>
  Example with long Text
  <div class="component">
    <div class="line"></div>
    <div class="content">
      <div class=label>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class=label>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnnnnnnnnn</div>
    </div>
    <div class="icon">X</div>
  </div>
</div>

Answer 1

只需添加溢出：隐藏;在.content类

上

body {
  background:#cacaca;
}

.sector-card {
  position:relative;
  width:50%;
  .sector-panel {
    width:50%;
    display:block;
    height:300px;
    &__information {
      background:#fff;
      z-index:1;
      position:relative;       
    }
    &__study {
      background-size:cover;
      z-index:0;
      position:absolute;
      top:15%;
      right:25%;
    }
  }
  &:hover {
    .sector-panel__study {
      animation:moveFront 2s forwards;
      z-index:3;
    }
  }
}

@keyframes moveFront {
  0%   { z-index:-1; right:25%; }
  49% {z-index:-1;right:0;}
  50% {z-index:3;right:0;}
  100% {right:25%;}
}

.example {
  display: flex;
  flex-direction: column;
}

.component {
  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
}

.line {
    width: 2px;
    min-width: 2px;
    height: 30px;
    background-color: black;
    margin-top: 5px;
}

.content {
    height: 100%;
    width: 100%;
    padding: 7px 10px 7px 5px;
    overflow: hidden;
}

.label {
  line-height: 13px;
    font-size: 13px;
    height: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c4c7cc;
    width: 100%;
}

.icon {
    color: black;
    float: left;
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
}

Answer 2

您不需要浮动.icon元素，最好将其定位为absolute（请查看下面的css代码）。为此，必须将.component分区定位为relative。将容器定位为relative后，它将成为absolute定位元素.icon坐标的参考。

.icon {

    position: absolute;
    top: 0;
    right: 0;

    color: black;
    /*float: left;*/
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
}
.component {

  position:relative; /*add this here*/

  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
}

Answer 3

将组件位置relative和图标位置absolute设置为图标。

像这样：

.component {
  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
position:relative;
}

.icon {
    color: black;
    float: left;
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
    position:absolute 
    right:2px;
}

防止文字出现在 X 后面你可以将填充应用于组件类

.component{
padding-right:25px;
}

div容器浮动在父容器之外

3 个答案: