2012-03-14 19 views
6

div या span के अंदर पाठ का हिस्सा छिपाने के लिए कैसे छिपाएं?टेक्स्ट एचटीएमएल, सीएसएस, जावास्क्रिप्ट

मैं 160 अक्षरों का एक पाठ है, लेकिन मैं प्रदर्शित करने के लिए केवल पहले 40

मैं अपने div अंदर पूरा पाठ के लिए span के रूप में मैं जावास्क्रिप्ट खोज करते है चाहते हैं।

उत्तर

5

आपको पिछले 120 वर्णों के चारों ओर एक अवधि बनाने के लिए कुछ जावास्क्रिप्ट की आवश्यकता होगी जो उन्हें छुपाए। एक सीएसएस विशेषता "दृश्यता: छुपा" है जिसे अवधि में लागू किया जा सकता है।

<div>first 40 chars <span style="visibility:hidden">last 120 chars</span></div> 
+1

यह सवाल पूछता है: "मुझे पहले 40 वर्ण कैसे मिलेंगे?" ... (मान लीजिए कि यह स्थिर HTML नहीं है) –

+0

@Madmartigan यदि यह स्थिर HTML नहीं है, तो आप उत्पन्न करते समय अवधि जोड़ सकते हैं सर्वर पर पेज। PHP या एएसपी में बहुत मुश्किल नहीं होना चाहिए। JQuery के साथ भी आसान है। – GolezTrol

4

आप बल्कि पात्रों में से एक सटीक संख्या की तुलना में, एक निश्चित आकार के लिए div क्लिप चाहते हैं, तो आप सिर्फ div आकार आप चाहते हैं और दे सकते हैं:

कुछ ऐसे ही परिणाम होना चाहिए फिट नहीं होने वाली सामग्री को क्लिप करने के लिए overflow: hidden निर्दिष्ट करें।

यदि आप सुनिश्चित करते हैं कि div की ऊंचाई पाठ की रेखा ऊंचाई की भीड़ है, तो आपके पास एक पंक्ति के लंबवत (लंबवत) मध्य में सामग्री नहीं होगी।

10

आप अपने तत्व "टेक्स्ट-ओवरफ्लो: इलिप्सिस" के लिए एक सरल सीएसएस प्रॉपर्टी का उपयोग कर सकते हैं; इस संपत्ति का प्रभावी ढंग से उपयोग करने के लिए आपको इसके साथ कुछ संबंधित गुणों को लागू करने की आवश्यकता है।

उदाहरण के लिए:

<div style="width: 50px; text-overflow: ellipsis; white-space: nowrap; 
overflow: hidden;">Some text goes here</div> 

* क्रोम में परीक्षण किया गया।

+0

यह शुद्ध जादू है। – fiatjaf

संबंधित मुद्दे