क्या मैं सीएसएस का उपयोग करके पाठ को बढ़ा सकता हूं?

Question

क्या मैं सीएसएस में पाठ को बढ़ा सकता हूं? मैं नहीं चाहता कि फ़ॉन्ट बड़ा हो, क्योंकि इससे उसके बगल में छोटे पाठ की तुलना में फ़ोल्डर दिखाई देता है। मैं सिर्फ पाठ को लंबवत रूप से फैलाना चाहता हूं, इसलिए यह विकृत है। यह एक div में होगा, और फिर इसके बगल का सामान्य टेक्स्ट दूसरे div में होगा। मैं यह कैसे कर सकता हूँ?

Comments

क्षैतिज अधिकार के लिए Thats? ऊर्ध्वाधर के बारे में क्या?

— मैथ्यू 905

क्या आप इसके लिए उपयोग करने की कोशिश कर रहे हैं? पाठ की एक-दो पंक्तियों के लिए? क्या आप जावास्क्रिप्ट का उपयोग करके खुश हैं?

— thirtydot

Answer 1

हां, आप वास्तव में CSS 2D ट्रांसफ़ॉर्म के साथ कर सकते हैं। यह IE9 + सहित लगभग सभी आधुनिक ब्राउज़रों में समर्थित है। यहाँ एक उदाहरण है।

एचटीएमएल

<p>I feel like <span class="stretch">stretching</span>.</p>

सीएसएस

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

सुझाव: पाठ टकराव को रोकने के लिए आपको अपने फैलाए गए पाठ में मार्जिन जोड़ने की आवश्यकता हो सकती है।

Comments

इसे सबमिट बटन टेक्स्ट पर कैसे लागू किया जा सकता है? (पाठ, बटन नहीं)

— dstonek

बस <p> </ p> टैग को <बटन> </ बटन> में बदलें ... शैली "खिंचाव" वर्ग के साथ स्पैन टैग में कुछ भी प्रभावित करेगी।

— टिमोथी पेरेज

आप ट्रांसफ़ॉर्म-मूल को भी जोड़ना चाह सकते हैं क्योंकि यह केंद्र से डिफ़ॉल्ट होगा। परिवर्तन-उत्पत्ति: बाएं केंद्र; developer.mozilla.org/en-US/docs/CSS/transform-origin

— रिक

आपके पास पीछे की तरफ कुल्हाड़ियां हैं। प्रश्नकर्ता पाठ को लंबवत रूप से फैलाना चाहता है , क्षैतिज रूप से नहीं।

— BoltClock

यह बहुत अच्छा है, लेकिन दुर्भाग्य से यह pseudoselector जैसे :: प्रथम-अक्षर के साथ काम नहीं करता है।

— सिमोन

Answer 2

मैं पाठ के क्षैतिज स्ट्रेचिंग के लिए उत्तर दूंगा, क्योंकि ऊर्ध्वाधर आसान भाग है - बस "ट्रांसफॉर्म: स्केल ()" का उपयोग करें

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

पत्र-रिक्ति केवल अक्षरों के बीच स्थान जोड़ता है, कुछ भी नहीं फैलाता है, लेकिन यह थोड़े सापेक्ष है

इनलाइन-ब्लॉक क्योंकि इनलाइन तत्व बहुत अधिक प्रतिबंधात्मक हैं और नीचे दिए गए कोड अन्यथा काम नहीं करेंगे

अब जो संयोजन है उससे फर्क पड़ता है

फ़ॉन्ट आकार हम चाहते हैं पाने के लिए - इस तरह से पाठ वास्तव में यह होना चाहिए लंबाई है और पाठ से पहले और बाद में यह करने के लिए अगले दिखाई देगा (स्केल x सिर्फ दिखाने के लिए है, ब्राउज़र अभी भी तत्व को देखता है अन्य तत्वों को पोजिशन करते समय इसके मूल आकार पर)।

पाठ की ऊंचाई को कम करने के लिए बड़े पैमाने पर, ताकि यह पाठ के बगल में भी ऐसा ही हो।

परिवर्तन-मूल को पंक्ति के शीर्ष से पाठ स्केल बनाने के लिए।

मार्जिन-बॉट एक नकारात्मक मान पर सेट होता है, ताकि अगली पंक्ति बहुत नीचे न हो - अधिमानतः प्रतिशत, ताकि हम लाइन-ऊंचाई संपत्ति को बदल न दें। ऊर्ध्वाधर-संरेखित शीर्ष पर, पाठ को पहले या बाद में अन्य ऊंचाइयों पर जाने से रोकने के लिए (क्योंकि फैला हुआ पाठ 32px का वास्तविक आकार है)

- साधारण स्पैन तत्व का एक फ़ॉन्ट-आकार है, केवल एक संदर्भ के रूप में।

खिंचाव के कारण होने वाले पाठ की बोल्डनेस को रोकने के तरीके के लिए पूछे गए प्रश्न और मैंने अभी भी एक नहीं दिया है, लेकिन फ़ॉन्ट-भार संपत्ति में सामान्य और बोल्ड की तुलना में अधिक मूल्य हैं ।

मुझे पता है, आप बस इसे नहीं देख सकते हैं, लेकिन यदि आप उपयुक्त फोंट की खोज करते हैं , तो आप अधिक मूल्यों का उपयोग कर सकते हैं।

Answer 3

तकनीकी रूप से, नहीं। लेकिन आप जो कर सकते हैं, वह एक फॉन्ट साइज़ का उपयोग करना है जो जितना लंबा होगा उतना ही आप स्ट्रेच किए गए फॉन्ट को चाहेंगे, और फिर इसे क्षैतिज रूप से कंडेनस करेंगे font-stretch।

Answer 4

एक ही तरीका है कि मैं "MENU" जैसे छोटे ग्रंथों के लिए सोच सकता हूं कि हर एक अक्षर को एक स्पैन में रखा जाए और बाद में उन्हें कंटेनर में जस्टिफाई किया जाए। ऐशे ही:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

और फिर सीएसएस:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

Answer 5

सीएसएस फॉन्ट-खिंचाव अब सभी प्रमुख ब्राउज़रों (आईओएस सफारी और ओपेरा मिनी को छोड़कर) में समर्थित है। एक सामान्य फ़ॉन्ट-परिवार को खोजना आसान नहीं है जो फोंट के विस्तार का समर्थन करता है, लेकिन उन फोंट को खोजना आसान है, जो संघनन का समर्थन करते हैं, उदाहरण के लिए:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Comments

जिज्ञासु को यह वोट क्यों मिला, मैं इसे नियमित रूप से संकीर्ण स्क्रीन पर पाठ को फिट करने के लिए एक त्वरित तरीके के रूप में उपयोग करता हूं: यह एरियल फ़ॉन्ट के साथ बहुत अच्छा काम करता है

— सेमैटिकजेन

Answer 6

हमेशा इस पृष्ठ पर वापस आते हैं जब एक डिजाइनर मुझ पर एक फ़ॉन्ट खींचता है। स्वीकृत समाधान बहुत अच्छा काम करता है, लेकिन मैं अक्सर मुद्दों पर हाशिये पर चला जाता हूं।

यदि आप समस्याओं में चल रहे हैं तो चौड़ाई के बजाय ऊँचाई पर परिवर्तन का उपयोग करने की अनुशंसा करेंगे, मेरे वर्तमान प्रोजेक्ट में मेरे लिए एक जीवन सुरक्षित था।

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}