मैं HTML- स्वरूपित उपयोगकर्ता इनपुट के ब्लॉक पर प्रदर्शित लाइनों की संख्या को कैसे नियंत्रित करूं?

Question

मेरे पास एक रेल ऐप है जो उपयोगकर्ताओं को कुछ HTML- स्वरूपित टेक्स्ट (पी, ओएल, उल, ब्लॉकक्कोट) इनपुट करने देता है। अब मैं इस पाठ का संक्षिप्त सारांश प्रदर्शित करना चाहता हूं, लेकिन यह सुनिश्चित करना चाहता हूं कि मैं केवल < = 4 "रेखाएं" दिखा रहा हूं। मैं प्रदर्शित शब्दों की संख्या से टेक्स्ट को छोटा करने का प्रयास कर सकता हूं, लेकिन अगर एक शब्द एलआई तत्व हैं, तो यह अभी भी कई लाइनों में समाप्त हो सकता है। मैं यह कैसे कर सकता हूं?

Answer 1

कैसे के बारे में:

<input maxlength="value" /> 

http://www.w3schools.com/tags/att_input_maxlength.asp

Answer 2

अपने लाइनों जहां <br> या \n हैं द्वारा निर्धारित कर रहे हैं? यदि ऐसा है तो उन्हें केवल text.substring(0, to the location-1 where the 4th break/newline is) दिखाएं। यदि आपकी देनदारी लंबाई से निर्धारित होती है (उदाहरण के लिए आप केवल प्रत्येक पंक्ति के लिए 20 वर्ण दिखा सकते हैं) तो उस प्रतिबंध को अपनी गिनती में जोड़ें। यदि ऐसा है तो मैं आपको दिखा सकता हूं कि मैं इसे कैसे करूंगा।

Answer 3

आप style="max-height: 40"

इस्तेमाल कर सकते हैं लेकिन यह केवल काम करेंगे, अगर आप अपने लाइनों की लाइन ऊंचाई के बारे में पता है।

मुझे नहीं लगता कि एक संकेत है, जहां आप अधिकतम लाइनें प्रदान कर सकते हैं।

Answer 4

मुझे लगता है कि संक्षिप्त जवाब यह है कि आप इसे सही नहीं कर सकते हैं, खासकर सर्वर की तरफ नहीं। एक रणनीति सिर्फ कुछ @Kyra सुझाए गए कुछ का उपयोग करके guesstimate करना होगा।

दूसरी बात यह है कि उपयोगकर्ता के ब्राउज़र पर पूरा पाठ भेजना होगा, फिर फ़ॉन्ट आकार (जो उपयोगकर्ताओं के व्यक्तिगत सीएसएस द्वारा संशोधित किया जा सकता है) के साथ उचित चौड़ाई के एक div में इसे जोड़ना होगा वास्तव में, और उसके परिणामस्वरूप div की ऊंचाई मापते हैं।

तो अपने div कुछ इस तरह दिख सकता है:

<div id="dummyDiv" style="position:absolute;top:-10000px;width:400px;font-size:smaller"> 
user text here 
</div> 

तो फिर तुम उपाय जावास्क्रिप्ट का उपयोग कर ऊंचाई (यानी jQuery), और यदि लेख बहुत बड़ा है, जब तक पाठ के छोटे स्निपेट पर इस कोशिश कर रखना यह एक उचित ऊंचाई है।

संपादित: इस रणनीति के लिए ऋण flot

Answer 5

को जाता है अगर मैं तुम्हें सही ढंग से समझ आप पाठ के एचटीएमएल पूर्वावलोकन का एक प्रकार है कि उपयोगकर्ताओं को एक पाठ क्षेत्र में टाइप करें, पूर्वावलोकन कि पाठ क्षेत्र के नीचे से पता चलता तरह दिखाना चाहते हैं यहाँ stackoverflow पर।

शायद सीएसएस के साथ सबसे आसान तरीका है।

#preview { height: 4em; overflow: hidden; }

अगर line-height सामान्य है कि काम करना चाहिए। यह निश्चित रूप से अतिरिक्त पाठ छुपा रहा है। यदि छिपाना स्वीकार्य नहीं है और आपको रूबी से प्रदर्शित होने के लिए केवल 4 लाइनें उत्पन्न करनी होंगी तो यह ट्रिकियर है। मुझे रूबी नहीं पता है इसलिए मैं आपको कोड उदाहरण नहीं दे सकता। मैं पहले किसी भी बिंदु पर टेक्स्ट को विभाजित कर दूंगा, जहां <br>, <p>, <li> इत्यादि जैसी नई लाइन को मजबूर किया जाएगा। फिर उन हिस्सों को एक पंक्ति पर फिट कर सकते हैं और उन अंतराल पर पाठ को विभाजित कर सकते हैं। क्षमा करें, मुझे रूबी कोड नहीं पता है, लेकिन आप पहले उन पंक्तियों को तोड़ने वाले पात्रों पर पाठ को विभाजित करने में सक्षम होना चाहिए और फिर इसे प्रत्येक एक्स वर्णों को विभाजित करना चाहिए जहां एक्स एक पंक्ति पर फिट वर्णों की अनुमानित राशि है।यदि आप एक निश्चित चौड़ाई फ़ॉन्ट का उपयोग करते हैं तो आप यह पता लगा सकते हैं कि रेखा पर कितने अक्षर फिट हैं। तो आप एक सरणी या कुछ के साथ खत्म हो जाएगा और फिर आप पहले 4 टुकड़ों को एक साथ चिपकाएं।

मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 6

<p><%= truncate strip_tags(object.text), :length => 150, :omission => '…' %></p> 

मार्कअप के भीतर छंटनी करने का प्रयास टूटा हुआ लेआउट मांगना है। मैं इसे पट्टी कर दूंगा और पाठ को छोटा कर दूंगा। यदि आपको मार्कअप की आवश्यकता है तो मैं स्वरूपण को संभालने के लिए मार्कडाउन या टेक्सटाइल का उपयोग करूंगा और फिर लंबाई आधारित छंटनी अधिक सटीक आकार में होगी।