पाठ के चारों ओर बॉर्डर चादर है

Question

मान लीजिए मैं इसे

<div id='page' style='width: 600px'> 
    <h1 style='border:2px black solid; font-size:42px;'>Title</h1> 
</div> 

शीर्षक पेज भर में सभी 600 पिक्सल का विस्तार होगा के लिए सीमा है, लेकिन मैं शब्द "शीर्षक" चाहते कसकर फिट करने के लिए कुछ पाठ के साथ एक div है के भीतर। हालांकि, मुझे समय से पहले पता नहीं है कि शब्द कितने पिक्सेल चौड़े हैं इसलिए मैं उदाहरण के लिए "शीर्षक" को एक div के अंदर नहीं डाल सकता और इसकी चौड़ाई स्पष्ट रूप से सेट कर सकता हूं।

क्या सीमा के चारों ओर एक सीमा फिट करने का कोई आसान तरीका है जो किसी क्षेत्र में क्षैतिज रूप से विस्तारित नहीं होता है?

Answer 1

ऐसा इसलिए है क्योंकि h1 एक ब्लॉक तत्व है, इसलिए यह लाइन (या चौड़ाई जो आप देते हैं) में विस्तारित होगा।

आप h1 पर display:inline की स्थापना करके सीमा केवल पाठ के चारों ओर जाना कर सकते हैं

उदाहरण: http://jsfiddle.net/jonathon/XGRwy/1/

Answer 2

सुनिश्चित नहीं है, अगर आप यही चाहते हैं, लेकिन आप आंतरिक div को इनलाइन-तत्व बना सकते हैं। इस तरह सीमा को केवल पाठ के चारों ओर लपेटा जाना चाहिए। इससे भी बेहतर है कि आप अपने शीर्षक के लिए इनलाइन-तत्व का उपयोग करें।

समाधान 1

<div id="page" style="width: 600px;"> 
    <div id="title" style="display: inline; border...">Title</div> 
</div> 

समाधान 2

<div id="page" style="width: 600px;"> 
    <span id="title" style="border...">Title</span> 
</div> 

संपादित करें: अजीब, इसलिए मेरे कोड-उदाहरण सही ढंग से ब्लॉक के रूप में व्याख्या नहीं करता है, तो मैं इनलाइन कोड-विधि का उपयोग करने के लिए किया था ।

Answer 3

इस कोशिश करो और अगर आप आप के लिए क्या लक्ष्य कर रहे हैं देखें:

<div id='page' style='width: 600px'> <h1 style='border:2px black solid; font-size:42px; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;'>Title</h1> </div>

Answer 4

इसे एक स्पैन तत्व में डालने का प्रयास करें:

<div id='page' style='width: 600px'> 
 
    <h1><span style='border:2px black solid; font-size:42px;'>Title</span></h1> 
 
</div>