सीएसएस पाठ-अतिप्रवाह: दीर्घवृत्त; काम नहीं कर रहा?

Question

मुझे नहीं पता कि यह सरल सीएसएस काम क्यों नहीं कर रहा है ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

4 वें "टेस्ट" के आसपास काट देना चाहिए

Comments

संबंधित stackoverflow.com/questions/802175/…

— Adrien Be

संबंधित: एलिप्सिस को मल्टीलाइन टेक्स्ट पर लागू करना

— माइकल बेंजामिन

FF only- यदि filterलागू किया जाता है, तो इलिप्सिस प्रदान नहीं किया जाएगा। बग खोला

— vsync

मैंने समस्याओं को सुलझाने के बारे में एक पोस्ट लिखी text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow

— Fausto NA

मेरे मामले में, प्रदर्शन को हटाते हुए: तत्व से फ्लेक्स ने मदद की

— एडुआर्ड

Answer 1

text-overflow:ellipsis; केवल तभी काम करता है जब निम्नलिखित सत्य हों:

• तत्व की चौड़ाई px(पिक्सेल) में विवश होना चाहिए । चौड़ाई %(प्रतिशत) काम नहीं करेगी।
• तत्व का होना overflow:hiddenऔर white-space:nowrapसेट होना ।

आपके द्वारा यहां समस्या होने का कारण यह है widthकि आपके aतत्व में बाधा नहीं है। आपके पास एक widthसेटिंग है, लेकिन क्योंकि तत्व को सेट किया गया है display:inline(यानी डिफ़ॉल्ट) यह इसे अनदेखा कर रहा है, और कुछ भी इसकी चौड़ाई को बाधित नहीं कर रहा है।

आप निम्न में से एक करके इसे ठीक कर सकते हैं:

• तत्व को display:inline-blockया display:block(शायद पूर्व में सेट करें , लेकिन आपकी लेआउट आवश्यकताओं पर निर्भर करता है)।
• इसके एक तत्व को सेट करें display:blockऔर उस तत्व को एक निश्चित widthया दें max-width।
• तत्व को float:leftया float:right(शायद पूर्व में, लेकिन फिर से सेट करें, या तो एक ही प्रभाव होना चाहिए जहां तक ​​एलिप्सिस का संबंध है)।

मेरा सुझाव है display:inline-block, क्योंकि इससे आपके लेआउट पर न्यूनतम संपार्श्विक प्रभाव पड़ेगा; यह बहुत काम करता है जैसे display:inlineकि यह वर्तमान में उपयोग कर रहा है जहाँ तक लेआउट का संबंध है, लेकिन साथ ही साथ अन्य बिंदुओं के साथ प्रयोग करने के लिए स्वतंत्र महसूस करें; मैंने आपको यह समझने में मदद करने के लिए जितना संभव हो उतना जानकारी देने की कोशिश की है कि ये चीजें एक साथ कैसे बातचीत करती हैं; सीएसएस को समझने का एक बड़ा हिस्सा यह समझने के बारे में है कि विभिन्न शैलियाँ एक साथ कैसे काम करती हैं।

यहां आपके कोड के साथ एक स्निपेट है, एक display:inline-blockजोड़ा के साथ , यह दिखाने के लिए कि आप कितने करीब थे।

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

उपयोगी संदर्भ:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Comments

क्या होगा अगर मैं उत्तरदायी डिजाइन के कारण सेट चौड़ाई का उपयोग नहीं कर सकता हूं?

— SearchForKnowledge

ध्यान दें कि अधिकतम-चौड़ाई भी काम करती है। इससे मुझे मदद मिली क्योंकि मेरे पास एक आइकन था जिसे टेक्स्ट की समाप्ति को उसके स्पैन की चौड़ाई की परवाह किए बिना गले लगाना था। (अन्यथा पाठ दाईं ओर की चौड़ाई पूरी नहीं होने पर आइकन दाईं ओर फ़्लोट होगा)

— केविन

नोट: white-space: nowrapवास्तव में आवश्यक नहीं है। हम अभी भी इसके बिना भी दीर्घवृत्त देख सकते हैं। कई लाइनों के लिए text-overflow, इस SO

— gfaceless

यह निश्चित नहीं है कि यह हालिया परिवर्तन है या नहीं, लेकिन Chrome 50 (बीटा) में आपको px मान पर चौड़ाई सेट करने की आवश्यकता नहीं है - "100%" भी काम करता है। white-space: nowrapहालांकि आवश्यक है।

— थुडन

आपको एक निश्चित सेट करने की आवश्यकता नहीं है width। आपको white-space: nowrap;बस एक सेट करने की आवश्यकता है और यह ठीक काम करता है।

— adjj

Answer 2

स्वीकृत जवाब कमाल का है। हालाँकि, आप अभी भी %चौड़ाई का उपयोग कर सकते हैं और प्राप्त कर सकते हैं text-overflow: ellipsis। समाधान सरल है:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

ऐसा लगता है कि जब भी आप उपयोग करते हैं calc, तो अंतिम मूल्य निरपेक्ष पिक्सल में प्रदान किया जाता है, जिसके परिणामस्वरूप एक- एवेंज कंटेनर के लिए 80%कुछ इस तरह परिवर्तित हो जाता है । इसलिए, उपयोग करने के बजाय , उपयोग करें ।800px1000pxwidth: [YOUR PERCENT]%width: calc([YOUR PERCENT]%)

Answer 3

इसलिए अगर आप इस सवाल पर पहुँचते हैं क्योंकि आपको display: flexकंटेनर के अंदर काम करने की कोशिश में परेशानी हो रही है , तो min-width: 0उस बाहरी कंटेनर में जोड़ने की कोशिश करें जो उसके माता-पिता को ओवरफ्लो कर रहा है, भले ही आप पहले से ही overflow: hiddenइसे सेट कर दें और देखें कि यह आपके लिए कैसे काम करता है।

अधिक विवरण और aj-foster द्वारा इस कोडपेन पर एक कार्यशील उदाहरण । पूरी तरह से मेरे मामले में चाल चली।

Comments

महान समाधान - यह केवल एक ही यहां पोस्ट किया गया है जो position: stickyएक display: flexकंटेनर के भीतर एक तत्व के लिए काम करता है ।

— जेम्स डिंसडेल

मुझे लगता है कि इसे चुनिंदा उत्तर में शामिल किया जाना चाहिए। इसने मेरी समस्या हल कर दी। धन्यवाद!

— j0nd0n7

आप, सर, एक प्रतिभाशाली हैं।

— नाथन उस्मान

धन्यवाद आदमी, दिन बचाया

— छाता

Answer 4

यह भी सुनिश्चित करें कि IE10 और नीचे के word-wrapलिए सामान्य पर सेट है ।

नीचे संदर्भित मानक इस संपत्ति के व्यवहार को "टेक्स्ट-रैप" संपत्ति की सेटिंग पर निर्भर होने के रूप में परिभाषित करते हैं। हालाँकि, विंडोज़ इंटरनेट एक्सप्लोरर में वर्डवैप सेटिंग्स हमेशा प्रभावी होती हैं क्योंकि इंटरनेट एक्सप्लोरर "टेक्स्ट-रैप" संपत्ति का समर्थन नहीं करता है।

इसलिए मेरे मामले में, एफएफ और क्रोम में काम word-wrapकरने के लिए ब्रेक-वर्ड (विरासत में या डिफ़ॉल्ट रूप से?) सेट किया गया था text-overflow, लेकिन आईई में नहीं।

वर्ड-रैप संपत्ति पर एमएस जानकारी

Answer 5

anchor, span... टैग कर रहे हैं इनलाइन तत्वों डिफ़ॉल्ट रूप से, इनलाइन तत्वों के मामले में widthसंपत्ति काम करता है नहीं है। आप या तो करने के लिए अपने तत्व को परिवर्तित करने के लिए है तो inline-blockया block levelतत्वों

Answer 6

कार्य करने के लिए दीर्घवृत्त के लिए जानकारी के बाद लिखी गई चार पंक्तियों को शामिल करें

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Answer 7

अपने में जोड़ें display: block;याdisplay: inline-block;#User_Apps_Content .DLD_App a

डेमो

Comments

मैंने अभी जाँच की है और यह कट रहा है: /

— SearchForKnowledge

Answer 8

आप बस एक लाइन सीएसएस जोड़ते हैं:

.app a {
   display: inline-block;
}

Answer 9

में बूटस्ट्रैप 4 , आप एक जोड़ सकते हैं .text-truncateएक अंडाकार के साथ पाठ काटना वर्ग।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Answer 10

शामिल होना चाहिए

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

जरूरी नहीं है

display: inline

जूते शामिल हैं

position: sticky

Answer 11

आप फ्लोट भी जोड़ सकते हैं: बाएं; इस वर्ग के अंदर #User_Apps_Content .DLD_App a

Answer 12

मुझे उत्तरदायी होने के दौरान कुछ लंबे विवरणों को दीर्घवृत्त (केवल एक लेन में ले जाना) करना था, इसलिए मेरा समाधान था कि मैं पाठ को लपेटने (बजाय white-space: nowrap) और तय चौड़ाई के बजाय निश्चित ऊंचाई जोड़ूँ:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Answer 13

यह वह कोड है जो अनुमति देता है:

overflow: hidden;
text-overflow: ellipsis;

अतिप्रवाह: छिपाना आवश्यक है

Answer 14

मैंने उसी मुद्दे का सामना किया और ऐसा लगता है जैसे सफारी के लिए कोई भी समाधान ऊपर काम नहीं करता है। गैर-सफारी ब्राउज़र के लिए, यह ठीक काम करता है:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

सफारी के लिए, यह वह है जो मेरे लिए काम करता है। ध्यान दें कि ब्राउज़र सफारी है या नहीं यह जांचने के लिए मीडिया क्वेरी समय के साथ बदल सकती है, इसलिए यदि यह आपके लिए काम नहीं करता है तो मीडिया क्वेरी के साथ टिंकर करें। line-clampसंपत्ति के साथ , वेब में दीर्घवृत्त के साथ कई लाइनें होना भी संभव होगा, यहां देखें ।

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

Answer 15

https://stackoverflow.com/a/53784508/5626747

प्रतिष्ठा के कारण टिप्पणी नहीं कर सकते, इसलिए मैं एक और उत्तर दे रहा हूं:

इस मामले में आपको अपने द्वारा display: block;निर्धारित तत्व से आम तौर पर सुझाई गई संपत्ति को निकालना text-overflow: ellipsis;होगा, या अंत में इसे बिना काट दिया जाएगा।

Answer 16

इन्हें अपने css नियम में लिखें।

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Comments

आप इसके माध्यम से भी देख सकते हैं, jsfiddle.net/ManiAnand/5v6pfy9w

— मणि अबी आनंद

यदि चौड़ाई निर्दिष्ट की जा सकती है तो इससे मेरा उत्तर गलत नहीं होगा। आप सभी ने मेरे उत्तर में केवल डिस्प्ले ब्लॉक जोड़ा है, मैंने एक स्निपेट लिखा है, पूरे कोड नहीं, इसलिए अन्य चीजें जोड़ी जा सकती हैं, लेकिन समस्या से कोई लेना देना नहीं है !! क्या आप यह बता सकते हैं कि मेरा उत्तर सही नहीं है?

— सिराज आलम

चौड़ाई के साथ ही प्रदर्शन को भी निर्दिष्ट करने की आवश्यकता है। यदि चौड़ाई एक प्रतिशत या अनिर्दिष्ट है और हार्ड इकाइयों के लिए सेट नहीं है, तो अतिप्रवाह को विवश नहीं किया जाएगा और यह काम नहीं करेगा। स्वीकृत उत्तर देखें।

— jlesse

ऑप द्वारा चौड़ाई पहले ही निर्धारित की जा चुकी है। मैंने स्निपेट को उनके कोड में जोड़ने के लिए दिया

— सिराज आलम