Text-align-last - सीएसएस-ट्रिक्स

Anonim

text-align-lastआपको मजबूर लाइन ब्रेक से ठीक पहले टेक्स्ट के अंतिम (या केवल) लाइन के संरेखण को नियंत्रित करने की अनुमति देता है - उदाहरण के लिए एक अनुच्छेद के ठीक पहले एक पैराग्राफ या लाइन का अंत
।

.intro-graph ( text-align-last: center; )

इस लेखन के समय, केवल मोज़िला ब्राउज़र और इंटरनेट एक्सप्लोरर समर्थन text-align-last(विक्रेता उपसर्ग के साथ), और प्रत्येक का थोड़ा अलग कार्यान्वयन है। यह संपत्ति Chrome 35 में काम करना शुरू करने वाली थी, लेकिन Chrome 40 के रूप में इसे अभी भी प्रयोगात्मक वेब प्लेटफ़ॉर्म ध्वज की आवश्यकता है। पॉइंट ऑफ इंटरेस्ट में ब्राउज़र कार्यान्वयन पर अधिक विवरण।

मूल्यों

  • left कंटेनर के बाईं ओर पाठ की अंतिम पंक्ति को संरेखित करता है।
  • rightकंटेनर के दाईं ओर पाठ की अंतिम पंक्ति को संरेखित करता है।
  • center कंटेनर के भीतर पाठ की अंतिम पंक्ति को केंद्र में रखता है।
  • justify पाठ की अंतिम पंक्ति को सही ठहराता है ताकि यह कंटेनर की पूरी चौड़ाई को फैला दे, लाइन की लंबाई बढ़ाने के लिए यदि आवश्यक हो तो शब्दों के बीच जगह डालें।
  • startपाठ के आधार पर लाइन के "शुरू" के लिए पाठ को संरेखित करता है direction- एलटीआर भाषाओं के लिए छोड़ दिया, आरटीएल भाषाओं के लिए सही।
  • enddirectionपाठ के आधार पर लाइन के "अंत" के लिए अंतिम पंक्ति को संरेखित करता है - एलटीआर भाषाओं के लिए सही, आरटीएल भाषाओं के लिए छोड़ दिया गया।
  • autoडिफ़ॉल्ट। तत्व की text-alignसंपत्ति से मेल खाने के लिए पाठ की अंतिम पंक्ति को संरेखित करता है , अगर यह सेट है। यदि यह सेट नहीं है, autoतो पाठ को प्रारंभ में संरेखित करें।
  • inherittext-align-lastमूल तत्व की संपत्ति को लागू करता है।

डेमो

यह डेमो text-align-lastकार्रवाई में विभिन्न मूल्यों को दर्शाता है। नोट: इंटरनेट एक्सप्लोरर startया endमानों का समर्थन नहीं करता है ।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन टेक्स्ट-अलाइन-लास्ट देखें।

ब्याज के अंक

इंटरनेट एक्सप्लोरर में, text-align-lastकेवल तभी काम करता है जब text-alignचयनित तत्व के शेष पाठ को सेट किया जाता है justify। इसके अलावा, IE startया endमान को नहीं पहचानता है ।

मोज़िला ब्राउज़र में, text-align-lastएक मजबूर लाइन ब्रेक से पहले अंतिम पंक्ति पर काम करेगा , भले ही तत्व में बाकी पाठ के लिए कोई संरेखण निर्दिष्ट न हो।

यह जानने योग्य भी है कि text-align-lastचयनित तत्व के भीतर सभी अंतिम लाइनों के लिए संरेखण सेट करता है, न कि केवल पाठ की पूर्ण अंतिम पंक्ति। इसलिए, उदाहरण के लिए, यदि आपके पास divइसमें पाँच पैराग्राफ हैं, तो आपकी text-align-lastघोषणा प्रत्येक पैराग्राफ की अंतिम पंक्ति पर लागू होगी।

यदि आप text-align-lastकंटेनर में केवल बहुत अंतिम पंक्ति पर उपयोग करना चाहते हैं , तो आप उपयोग करने में सक्षम हो सकते हैं :last-childया :last-of-type। आपका CSS कुछ इस तरह दिखाई देगा:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

नीचे दिए गए डेमो में, बाईं ओर के शो के text-align-last: center;अंदर कई पैराग्राफ के साथ एक div पर लागू होता है। ध्यान दें कि प्रत्येक पैराग्राफ की अंतिम पंक्ति केंद्रित है। दाईं ओर का शो text-align-last: center;केवल डिव के अंदर अंतिम पैराग्राफ में लागू होता है :last-child।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन टेक्स्ट-अलाइन-लास्ट देखें।

सम्बंधित

  • पाठ संरेखित
  • पाठ इंडेंट

अधिक जानकारी

  • सीएसएस पाठ मॉड्यूल स्तर 3 (W3C) में पाठ-संरेखित-अंतिम
  • MDN पर पाठ-संरेखित-अंतिम
  • MSDN पर पाठ-संरेखित-अंतिम
  • Adobe के वेब प्लेटफ़ॉर्म टीम ब्लॉग पर पाठ-संरेखित-अंतिम
  • Chrome के कार्यान्वयन के बारे में वेबकिट बग 76173, text-align-last

ब्राउज़र का समर्थन

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
प्रायोगिक झंडे के साथ 35+ नहीं 34+ (उपसर्ग) नहीं 5.5+ (उपसर्ग) नहीं नहीं