Question

现在，我在要进行此操作的页面上具有一个min-width:80rem和一个max-width:150rem的元素。这里的想法是我不希望该元素妨碍页面的自然拉伸和收缩，但是当我尝试使其文本溢出时，只是“ alljobs”允许这样做而我没有得到想要的东西。

这就是我想发生的事情：

所有职位：全部... |已完成：all ...正在运行：all ... |失败：全部... |排队：所有...删除：allj ...

但是...相反，好吧，我真的无法在没有图片的情况下在此编辑器中显示示例，但是它将包裹在我也不想要的位置，也不会完全省略。如果我要包装它只会椭圆形，但是我也不要它，所以如果我包装它也不会椭圆形，然后它不会与其他所有东西一起收缩。一团糟。我只希望它能正确处理椭圆和文本溢出。

我不断添加样式的CSS：

white-space:no-wrap;
text-overflow:ellipse;
overflow:hidden;

我的CSS：

<style>
    .overview-bar {
        min-width: 80rem;
        max-width: 150rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 5rem;
    }
    .overview-bar span {
        margin: 0 1rem;
    }
    .count-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .count {
        margin-left: 1rem;
        color: var(--highlight-color);
    }
</style>

我的HTML：

<div class="overview-bar">
    <div id="showAllJobs" class="count-header" on-tap="jobStatusSort">All Jobs:<div class="count">alljobssssssssssssssssssssssss</div></div><span>|</span>
    <div id="showCompletedJobs" class="count-header" on-tap="jobStatusSort">Completed:<div class="count">alljobs</div></div><span>|</span>
    <div id="showRunningJobs" class="count-header" on-tap="jobStatusSort">Running:<div class="count">alljobs</div></div><span>|</span>
    <div id="showFailedJobs" class="count-header" on-tap="jobStatusSort">Failed:<div class="count">alljobs</div></div><span>|</span>
    <div id="showQueuedJobs" class="count-header" on-tap="jobStatusSort">Queued:<div class="count">alljobs</div></div><span>|</span>
    <div id="showDeletedJobs" class="count-header" on-tap="jobStatusSort">Deleted:<div class="count">alljobs</div></div>
</div>

获取文本溢出以正确显示Polymer 2中的子元素

0 个答案: