改行時に区切り記号を非表示にする方法は？

Question

これは例で説明するのが最も簡単だと思います。

のは、私はこのようなWebページのリストを持っているとしましょう：

word one, word two, word three, word four, word five, word six 

ユーザーは小さな画面の解像度を持っている場合、リストは次のようにラップしてしまうことがありますよう

word one, word two, word three, word four, word five, 
word six 

最初の行の最後にカンマがあります。私はそれを変更したいので、このようなことが起こると、コンマは隠されています。つまり、次のようになります。

word one, word two, word three, word four, word five 
word six 

CSSまたはJavascriptでこれを行う方法はありますか？

ありがとうございました。

Answer 1

はい。負のマージンでオーバーフローさせ、オーバーフローを隠すだけです。

div { 
 
    border: 1px solid; 
 
    overflow: hidden; 
 
    animation: size 5s linear infinite alternate; 
 
} 
 
span { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
span::before { 
 
    content: ','; 
 
    display: inline-block; 
 
    width: 10px; 
 
    margin-left: -10px; 
 
} 
 
@keyframes size { 
 
    from { width: 750px; } 
 
    to { width: 0; } 
 
}

<div> 
 
    <span>word one</span> 
 
    <span>word two</span> 
 
    <span>word three</span> 
 
    <span>word four</span> 
 
    <span>word five</span> 
 
    <span>word six</span> 
 
</div>