Получить переполнение текста, чтобы правильно отображать дочерние элементы в Polymer 2 - PullRequest
Новая
       10

Получить переполнение текста, чтобы правильно отображать дочерние элементы в Polymer 2

0 голосов
/ 04 октября 2018

Так что сейчас у меня есть элементы на странице, где это происходит, которые имеют min-width:80rem и max-width:150rem.Идея здесь в том, что я не хочу, чтобы этот элемент препятствовал естественному растяжению и сжатию страницы по горизонтали, но когда я пытаюсь сделать это переполнением текста, просто «все задания», чтобы позволить это, я не получаю то, что хочу.

Вот что я хочу, чтобы:

Все вакансии: allj ... |Завершено: allj ... |Запуск: allj ... |Не удалось: allj ... |В очереди: allj ... |Удалено: 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>
...