जब नई लाइन पर विभाजक को छुपाएं?

Question

मुझे लगता है कि एक उदाहरण के साथ व्याख्या करना सबसे आसान है।

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 

क्या सीएसएस या जावास्क्रिप्ट के साथ ऐसा करने का कोई तरीका है?

आपकी मदद के लिए धन्यवाद।

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>