CSS में एक अधिकतम वर्ण लंबाई निर्धारित करना

Question

मैं स्कूल के लिए उत्तरदायी वेबसाइट बना रहा हूँ और मेरा सवाल है:

मैं अपनी वेबसाइट पर (सीएसएस के साथ) (75 अक्षरों की तरह) वाक्यों की अधिकतम वर्ण लंबाई कैसे निर्धारित कर सकता हूं कि जब मेरे पास बहुत बड़ी स्क्रीन है, तो वाक्य 75 वर्णों से आगे नहीं जाएंगे।

मैंने एक अधिकतम चौड़ाई की कोशिश की है लेकिन यह मेरे लेआउट को गड़बड़ कर देता है। मैं इसे उत्तरदायी बनाने के लिए फ्लेक्सबॉक्स और मीडिया प्रश्नों का उपयोग कर रहा हूं।

Comments

यदि आपका उपयोग textareaया inputउनके लिए अधिकतम लंबाई ( maxlength="50"यह HTML में है) संपत्ति है या आपको जावास्क्रिप्ट का उपयोग करना होगा। इसके अलावा, मुझे लगता है कि मैंने इसे गलत समझा, एक चौड़ाई निर्धारित करने से वाक्य अगली पंक्ति में गिरने पर मजबूर हो जाएगा जब यह अंत में हिट होगा। यह डिफ़ॉल्ट व्यवहार है।

— रूडी

इस पर एक नज़र डालें: stackoverflow.com/questions/20552957/… - यह सीएसएस दीर्घवृत्त है, यह आपकी मदद कर सकता है

— डैरेन स्वीनी

जब आप ऐसा करने के लिए अकेले CSS का उपयोग नहीं कर सकते हैं, तो आप CSS का उपयोग करके वर्ण दिखाने की मात्रा को सीमित कर सकते हैं जैसा कि डैरेन ने सुझाव दिया है। आपको अपने टेक्स्ट कंटेनर को व्हाइट-स्पेस पर सेट करने की आवश्यकता है: नो-रैप, टेक्स्ट-ओवरफ़्लो: एलिप्सिस और ओवरफ़्लो: छिपा हुआ। फिर बस अपने कंटेनर के लिए आकार निर्धारित करें।

— पैट्रिक लिवर

ऐसी सीमा तय करने से आपका क्या मतलब है? इससे अधिक होने पर क्या होना चाहिए? "वाक्य" से आपका क्या तात्पर्य है? यह एक सीएसएस अवधारणा नहीं है। आप वाक्यों को पहचानने या चिह्नित करने का इरादा कैसे रखते हैं? या आप वास्तव में लाइन की लंबाई का मतलब है ? यदि आप करते हैं, तो इसके साथ आपकी समस्या क्या है? जब तक आप इसे रोकने के लिए विशेष चीजें नहीं करते हैं तब तक आम तौर पर पाठ स्वचालित रूप से लपेटता है।

— जुक्का के। कोर्पेला

Answer 1

आप हमेशा इस तरह एक max-widthऔर अतिप्रवाह सेट करके एक अलग विधि का उपयोग कर सकते हैंellipsis

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

एक उदाहरण: http://jsfiddle.net/3czeyznf/

मल्टी लाइन ट्रंकेशन के लिए एक flexसमाधान पर एक नज़र है । 3 पंक्तियों पर छंटनी के साथ एक उदाहरण।

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

एक उदाहरण: https://codepen.io/srekoble/pen/EgmyxV

Comments

धन्यवाद, मैं ellipsis के उपयोग को समझता हूं, लेकिन मैं यह नहीं देखता कि यह मेरी समस्या को कैसे हल करता है। मुझे लगता है कि एक स्क्रीन छोटा होने पर दीर्घवृत्त सही होता है, लेकिन जब इसका बड़ा हो जाता है तो मैं चाहता हूं कि यह 75 अक्षरों से कट जाए। इसलिए @ जीन-लुकिंग बताते हुए, जावास्क्रिप्ट के साथ ही संभव है? क्षमा करें, मैं कोडिंग करने के लिए नया

— हूं

आप देख सकते हैं कि आपकी टाइपोग्राफी के अनुसार किस जगह पर 75 वर्ण हैं और उसी के अनुसार अधिकतम-चौड़ाई निर्धारित की गई है। दुर्भाग्य से आप वर्णों के अनुसार वाक्य को छोटा करने के लिए CSS संपत्ति सेट नहीं कर सकते। वैकल्पिक रूप से आप एक फ्लेक्स ट्रंकट विधि का उपयोग इस लाभ के साथ कर सकते हैं कि आप ट्रंक विधि को पंक्तियों के अनुसार निर्दिष्ट कर सकते हैं।

— Vangel Tzo

यह पैराग्राफ की चौड़ाई को प्रभावित करता है, वाक्य की लंबाई को नहीं। और 200px वर्णों के संदर्भ में कुछ भी हो सकता है (यह इस बात पर भी निर्भर करता है कि आपके पास बहुत से i या बहुत डब्ल्यू है, और फ़ॉन्ट चेहरे और आकार पर)।

— जुक्का के। कोर्पेला

आप इसके बारे में सही हैं। चेक पॉलि_ डी उत्तर आपके समाधान के लिए उचित प्रतीत होता है

— Vangel Tzo

@VangelTzo यह केवल सिंगल लाइन के लिए है। क्या यह कई लाइनों के लिए किया जा सकता है? धन्यवाद

— बिस्वास

Answer 2

का CSS 'लंबाई मान' है ch।

एमडीएन से

यह इकाई तत्व के फ़ॉन्ट में ग्लिफ़ '0' (शून्य, यूनिकोड वर्ण U + 0030) की चौड़ाई, या अधिक सटीक रूप से अग्रिम माप का प्रतिनिधित्व करती है।

यह आप के बाद क्या हो सकता है।

p {
  overflow: hidden;
  max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

Comments

क्या यह किसी भी ब्राउज़र द्वारा लागू किया गया है? मेरे लिए बिल्कुल काम नहीं करता है। संपादित करें: फिर भी ड्राफ्ट dev.w3.org/csswg/css-values/#lengths

— शलजम

मुझे लगता है कि मैं आपके उत्तर के साथ जाऊंगा, मुझे लगता है कि अगर मैं अधिकतम-चौड़ाई निर्धारित करता हूं तो यह वही होगा: 30em; यह मेरे लिए काफी करीब है। धन्यवाद!

— शरीफ ११११

MDN में संगतता तालिकाओं के बारे में निश्चित नहीं ... लेकिन यह ( chइकाई) Chrome 50, IE11 या FF45 में मेरे लिए काम करने के लिए (जैसा कि अपेक्षित है) प्रकट नहीं होता है ?!

— MrWhite

हां, मैं @ w3dk के समान परिणाम दे रहा हूं। मैं सिर्फ सेट एक heightऔर overflow:hidden। मुझे दीर्घवृत्त पसंद था, लेकिन मैं केवल इतना ही सक्षम था कि अगर मैं सेट करूं तो काम कर सकूंगा white-space:no-wrap। मेरे मामले में, पाठ लपेट सकता है, बस कंटेनर के भीतर एक निश्चित चार सीमा से अधिक नहीं।

— क्रिस 22

सुनिश्चित नहीं हैं कि इसमें इतने वोट क्यों हैं क्योंकि यह स्पष्ट रूप से अपूर्ण है और प्रदान किए गए कोड के साथ काम नहीं कर रहा है। आपको जोड़ने की जरूरत हैwhite-space: nowrap;

— केविन एम

Answer 3

इसे अधिकतम-चौड़ाई पर सेट करने के बाद वर्णों को छोटा करने का प्रयास करें। मैंने इस मामले में 75ch का उपयोग किया है

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

मल्टीलाइन ट्रंकटिंग के लिए, कृपया लिंक का अनुसरण करें।

एक उदाहरण: https://codepen.io/srekoble/pen/EgmyxV

हम इसके लिए webkit css का उपयोग करेंगे। संक्षेप में WebKit सफारी / क्रोम के लिए एक HTML / CSS वेब ब्राउज़र रेंडरिंग इंजन है। यह ब्राउजर के लिए विशिष्ट हो सकता है क्योंकि प्रत्येक ब्राउज़र HTML / CSS वेब पेज को खींचने के लिए एक रेंडरिंग इंजन द्वारा समर्थित है।

Comments

पाठ को भी मोनोपोज़ किया जाना चाहिए, अभी आप 93 वर्णों के बाद पाठ को छोटा कर रहे हैं: codepen.io/anon/pen/bRELeb

— Fabrizio Calderan

यहाँ पर सबसे अच्छा जवाब। विशेष रूप से क्योंकि आप यहां तक ​​कि बहुस्तरीय ट्रंकिंग का उल्लेख करते हैं;) यदि एक बहु विकल्प के लिए जा रहा है, तो आप max-width:100%;रैपर div के लिए भी उपयोग कर सकते हैं । तो आपके पास एक उत्तरदायी ट्रंकटिंग है।

— xarlymg89

Answer 4

उदाहरण कोड:

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>

    

Answer 5

Chrome से आप " -webkit-line-clamp " के साथ प्रदर्शित लाइनों की संख्या निर्धारित कर सकते हैं :

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

तो मेरे लिए यह एक विस्तार में उपयोग करने के लिए है तो यह सही है, यहाँ अधिक जानकारी: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-standard-up -टूट-865413f16e5

Answer 6

यह सीएसएस के साथ संभव नहीं है, आपको इसके लिए जावास्क्रिप्ट का उपयोग करना होगा। हालाँकि आप p की चौड़ाई को 30 अक्षरों तक सेट कर सकते हैं और अगले अक्षर अपने आप नीचे आ जाएंगे लेकिन फिर से यह सही नहीं होगा और अक्षर राजधानी में होने पर अलग-अलग होंगे।

Comments

बेहतर होगा कि आप @ VangelTzo के जवाब के साथ जांच करें

— बेंजामिन

आप पूरी तरह से सही है जीन-ल्यूक, @VangelTzo एक वर्कअराउंड है, लेकिन सभी में कोई भी कूट नियंत्रक प्रदान नहीं करता है।

— गुइलुमे फे

यह सही उत्तर है - आप CSS में वर्ण गणना के अनुसार '' ट्वीक '' नहीं कर सकते। आपको JS का उपयोग करने की आवश्यकता है।

— सेराओसे

Answer 7

एचटीएमएल

<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>

jQuery

var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

सीएसएस

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

परिणाम

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। प्रिन नीसि लिगुला, डैपीबस ए वुल्लपट्ट बैठ एमेट, मैटिस एट ...

Jsfiddle

Comments

नमस्ते, एसओ में आपका स्वागत है! मैंने आपके उत्तर को शरीर में कोड जोड़कर संपादित किया। भविष्य के संदर्भ के लिए कृपया jsfiddle का लिंक देने के साथ उत्तर में अपना कोड शामिल करें!

— hatef

यह सबसे अच्छा उत्तर है क्योंकि यह ऊंचाई को भी संबोधित करता है और केवल चौड़ाई को नहीं। बहुत बढ़िया!

— ग्रासपर

प्रश्न सीएसएस समाधान के लिए पूछता है।

— सूतक

Answer 8

मल्टी लाइन वर्णों को छोटा करने का शुद्ध सीएसएस समाधान

मुझे भी इसी तरह की समस्या थी और इस बेहतरीन सीएसएस को हैकिंगुई.कॉम से ही हल मिला । आप जानकारी के लिए लेख पढ़ सकते हैं लेकिन नीचे मुख्य कोड है।

मैंने इसका परीक्षण किया और यह पूरी तरह से काम करता है। उम्मीद है कि किसी को जेएस या सर्वर साइड विकल्पों के लिए चुनने से पहले यह उपयोगी लगता है

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

Answer 9

आधुनिक सीएसएस ग्रिड उत्तर

CodePen पर पूरी तरह से काम करने वाला कोड देखें । निम्नलिखित HTML को देखते हुए:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

आप तीन कॉलम बनाने के लिए CSS ग्रिड का उपयोग कर सकते हैं और कंटेनर को मध्य कॉलम के लिए अधिकतम 70 वर्णों की चौड़ाई लेने के लिए कह सकते हैं जिसमें हमारा पैराग्राफ शामिल है।

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

यह ऐसा दिखता है ( पूरी तरह से काम करने के उदाहरण के लिए चेकआउट कोड ):

यहां एक और उदाहरण है जहां आप मानों की श्रेणी निर्धारित करने के लिए माइनमैक्स का उपयोग कर सकते हैं। छोटे पर्दे पर चौड़ाई 50 अक्षरों की चौड़ी और बड़ी स्क्रीन पर 70 अक्षर चौड़ी होगी।

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

Comments

महसूस नहीं किया कि आप chस्तंभों पर उपयोग कर सकते हैं। लवली।

— विल

इसके अलावा, विषय वस्तु को देखते हुए, बहुत प्यारी है कि आपके पेन की आईडी है rrdOvr। ;)

— विल

Answer 10

यह पोस्ट एक सीएसएस समाधान के लिए है, लेकिन यह पद काफी पुराना है, इसलिए यदि अन्य लोग इस पर ठोकर खाते हैं और आधुनिक जेएस फ्रेमवर्क जैसे कि कोणीय 4+ का उपयोग कर रहे हैं, तो बिना कोणीय पाइप के माध्यम से ऐसा करने का एक सरल तरीका है सीएसएस के साथ गड़बड़।

संभवतः ऐसा करने के "रिएक्ट" या "व्यू" तरीके भी हैं। यह केवल यह प्रदर्शित करने के लिए है कि यह एक ढांचे के भीतर कैसे किया जा सकता है।

truncate-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

Answer 11

2 अलग-अलग तरीकों से मेरे समाधान का प्रयास करें।

<div class="wrapper">
      <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}