ホバリングされた行だけの行折り返しを防止するにはどうすればよいですか？

Question

「これは壊れています！隣接する "Damn"タグは次の行に折り返されます。これは、「This is Broken！」タグはサイズが増加し、コンテナによって制約されています。

このラッピングを防ぐことはできますか？

タグと親コンテナのサイズは動的なので、「white-space：nowrap」プロパティを持つ包含要素にタグの行を簡単にグループ化することはできません。ホバリングされているタグまたは隣接するタグは、次の行に折り返すタグにすることができます。可能であれば、前と後のホバーの間に同じスペースをタグの間に保持したいと思います。

main { 
 
    width: 160px; 
 
} 
 
.material-tag-wrapper { 
 
    margin: 1px 3px 1px 0; 
 
    display: inline-block; 
 
} 
 
.material-tag-wrapper.closeable:hover .material-tag { 
 
    padding-right: 26px; 
 
} 
 
.material-tag-wrapper.closeable:hover .material-tag-remove { 
 
    opacity: 1; 
 
    padding-right: 10px; 
 
} 
 
.material-tag { 
 
    background-color: blue; 
 
    color: white; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
    border-radius: 3px; 
 
    padding: 2px 8px; 
 
    text-transform: uppercase; 
 
    font-size: 10px; 
 
    transition: .1s all; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.material-tag-remove { 
 
    color: #3C4858; 
 
    cursor: pointer; 
 
    font-size: .8em; 
 
    position: absolute; 
 
    top: 4px; 
 
    right: 0; 
 
    opacity: 0; 
 
    text-align: right; 
 
    text-decoration: none; 
 
    width: 100%; 
 
    z-index: 2; 
 
} 
 
.material-tag-remove:before { 
 
    content: "x"; 
 
    color: white; 
 
}

<main> 
 
    <div class="material-tag-wrapper closeable"> 
 
    <div class="material-tag"> 
 
     Beautiful 
 
     <div class="material-tag-remove"></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="material-tag-wrapper closeable"> 
 
    <div class="material-tag"> 
 
     Works 
 
     <div class="material-tag-remove"></div> 
 
    </div> 
 
    </div> 
 
    <div class="material-tag-wrapper closeable"> 
 
    <div class="material-tag"> 
 
     This is Broken! 
 
     <div class="material-tag-remove"></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="material-tag-wrapper closeable"> 
 
    <div class="material-tag"> 
 
     Damn 
 
     <div class="material-tag-remove"></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="material-tag-wrapper closeable"> 
 
    <div class="material-tag"> 
 
     I Work! 
 
     <div class="material-tag-remove"></div> 
 
    </div> 
 
    </div> 
 
</main>

Answer 1

あなたはmaterial-tag-wrapper:hoverにpadding-right: 26px;を追加するので、あなたはmainための同じルール（またはあなたが選択した任意のラッパー）を適用することができます：

main:hover { 
    width: 186px; /* base width of 160px + 26px */ 
}