时间戳

首页 > 解决方案 > Css ellipsis applied in wrong situation

css - Css ellipsis applied in wrong situation

问题描述

I have a div that contains text on it and i needed to apply text-overflow: ellipsis; on that text while the div width should be width: fit-content; and its max-width: 100%; (the ellipsis is then supposed to show in case where the actual div width will be greater than its parent width's as the text will be too long in that case)

.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
}

This works for long texts but for one word texts i found that the ellipsis is being applied too for no reason and as a consequence only the first letter or few letters of a word will shown!

.tagsWrapper{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width:150px;
  border:1px solid green;
}
.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    border:1px solid red;
    margin-right:3px;
}
<div class="tagsWrapper">
  <div class="tagWrap">OneWordText</div>
  <div class="tagWrap">multi words text</div>
</div>

Here is a jsFiddle showing the issue : https://jsfiddle.net/bardelman/u13hb04j/1/

The one word div is placed at the left, it's not supposed to have the ellipis, the second div is the only one that should get the ellipsis as it goes beyong the parent right edge

标签： css

解决方案

如果您希望标签采用额外的行，但仅为大于容器的标签添加省略号 - 只需添加flex-wrap: wrap.

.tagsWrapper{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width:150px;
  border:1px solid green;
}
.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    border:1px solid red;
    margin-right:3px;
}
<!DOCTYPE html>
<html>
<body>

<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div><div class="tagWrap">OneWo</div>
<div class="tagWrap">multi words text</div>
<div class="tagWrap">OneWordTextOneWordTextOneWordText</div>
</div>

</body>
</html>

如果您希望某些标签占用它们的宽度并限制其他标签 - 您应该以某种方式说浏览器。IE 你可以添加flex-shrink: 0到应该占用它们空间的标签中。

.tagsWrapper{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width:150px;
  border:1px solid green;
}
.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    border:1px solid red;
    margin-right:3px;
}

.tagWrap--noshrink {
    flex-shrink: 0;
}
<!DOCTYPE html>
<html>
<body>

<div class="tagsWrapper">
<div class="tagWrap tagWrap--noshrink">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>

</body>
</html>

如果这不能回答您的问题 - 从“在纸上”定义您想要的逻辑开始，那么就有可能将您的预期逻辑转换为代码

使用 :last-child 的附加解决方案

您不需要以这种方式设置类，但它仍然不是自动化的，如果最后一项之前的子项太长，它将无法工作。

.tagsWrapper{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width:150px;
  border:1px solid green;
  overflow: hidden;
}
.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    border:1px solid red;
    margin-right:3px;
    flex-shrink: 0;
}

.tagWrap:last-child {
    flex-shrink: 1;
}
<!DOCTYPE html>
<html>
<body>

<p>will work</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>


<p>will not work</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>

</body>
</html>

带有假椭圆的附加解决方案（伪元素）

您不需要以这种方式设置类，但它仍然不是自动化的，如果最后一项之前的子项太长，它将无法工作。

.tagsWrapper{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width:150px;
  border:1px solid green;
  overflow: hidden;
}
.tagWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    display: inline-block;
    border:1px solid red;
    margin-right:3px;
    flex-shrink: 0;
}

.tagsWrapper::after {
    content: "...";
    display: inline-block;
    padding-left: 1px;
    position: absolute;
    right: 0;
    top: 1px;
    bottom: 1px;
    line-height: 26px;
    background-color: white; /* need to be replaced with tag bg */
}
<!DOCTYPE html>
<html>
<body>

<p>will work</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
<div class="tagWrap">multi words text</div>
</div>

<p>will not work (but there are some hacks to fix it)</p>
<div class="tagsWrapper">
<div class="tagWrap">OneWordText</div>
</div>

</body>
</html>

如果这些解决方案都不适合您 - 我会假设这是不可能的。浏览器是解释代码的纯机器，你应该准确地告诉他要做什么以及如何计算它

推荐阅读