सीएसएस टेक्स्ट-ट्रांसफॉर्म सभी कैपिटल को कैपिटलाइज़ करता है

129

यहाँ मेरा HTML है:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

यहाँ मेरा CSS है:

.link {text-transform: capitalize;}

आउटपुट है:

Small Caps & ALL CAPS

और मैं चाहता हूं कि आउटपुट:

Small Caps & All Caps

कोई विचार?

css

— खान
स्रोत

1

@ मार्सेल - इसकी आवश्यकता नहीं है, यह एक स्थान के बाद है, इसलिए यह पूरी तरह से वैध शाब्दिक एम्पर्सैंड है (जब तक कि दस्तावेज एक्सएचटीएमएल नहीं है, लेकिन कोई सुझाव नहीं है)

— क्वेंटिन

1

@ डेविड - ओह, मुझे नहीं पता था कि यह एक मान्य संकेतन था। धन्यवाद, सीखने के लिए हमेशा कुछ नया होता है।

— मार्सेल कोर्पेल

57

CSS के साथ ऐसा करने का कोई तरीका नहीं है, आप इसके लिए PHP या जावास्क्रिप्ट का उपयोग कर सकते हैं।

PHP उदाहरण:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery का उदाहरण (यह अब एक प्लगइन है!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();

— Harmen
स्रोत

हाँ, शायद ऐसा करने का एकमात्र तरीका है।

— पेक्का

2

हो सकता है कि इस लूप + सब्सट्रिंग्स के बजाय नियमित अभिव्यक्तियों के साथ बेहतर हो - लेकिन आप जावास्क्रिप्ट के नियमित अभिव्यक्तियों में एक पत्र को कैसे जोड़ सकते हैं?

— हरमन

3

यदि आप इसे सर्वर-साइड करने जा रहे हैं, तो आप पूरे स्ट्रिंग को कम कर सकते हैं, फिर CSS को कैपिटलाइज़ करने दें। सिर्फ एक विचार।

— स्टीफन पी

16

मैंने पूरे स्ट्रिंग पर एक .toLowerCase () करना समाप्त कर दिया, फिर सीएसएस का उपयोग पूंजीकरण के लिए किया। सलाह के लिए धन्यवाद!

— खान

1

@GlennFerrie सीएसएस क्या एकमात्र समाधान है जिसके बारे में आप बात कर रहे हैं, अगर आप इसे हमारे साथ साझा करने में कोई आपत्ति नहीं करते हैं? :-)

— पानी से

183

आप इसे लगभग कर सकते हैं :

.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }

यह आपको आउटपुट देगा:

Small caps
All caps

— फीलिप बसबी
स्रोत

7

यह एक आकर्षण की तरह काम करता है, धन्यवाद!, यह आदेश महत्वपूर्ण है, साथ वाली लाइन: पहले अक्षर लोअरकेस लाइन के बाद होना चाहिए।

— स्टीवन लिज़ाराज़ो

9

इसके लिए आवश्यकता है लगता है .link तत्वों को ब्लॉक तत्वों के रूप में प्रदर्शित किया जाता है। (display: inline-ब्लॉक;) jsfiddle.net/7y7wqqhb/1

— तोरीन Finnemann

1

चतुर सोच, अच्छी तरह से किया Philihp। और "प्रदर्शन: इनलाइन-ब्लॉक" को इंगित करने के लिए अच्छी तरह से टॉरिन किया।

— क्रिस मेंडेस

9

लेकिन यह वांछित परिणाम नहीं देता है। यह तत्व के पहले अक्षर को ही कैपिटल करता है जबकि प्रश्न प्रत्येक शब्द के पहले अक्षर को कैपिटलाइज़ करने को कहता है। यह 'ऑल कैप्स' का उत्पादन करता है, लेकिन आवश्यक 'ऑल कैप्स' है

— मनप्रीत सिंह

1

@manpreetsingh सही है, इसीलिए मैंने कहा कि यह लगभग काम करता है। यह बिल्कुल वैसा नहीं हो सकता जैसा प्रश्न पूछा गया था, लेकिन अक्सर आपकी कल्पना लचीली होती है और एक सरल समाधान बेहतर होता है।

— फिलाहॉप बुस्बी

32

जावास्क्रिप्ट का उपयोग कर कन्वर्ट .toLowerCase()और capitalizeबाकी करना होगा।

— ronnyfm
स्रोत

1

हां। मैंने मॉडल में आइटमों को पुन: प्रसारित किया और उन्हें toLowerCase में परिवर्तित कर दिया, जैसे myArray [i] .firstName = myArray [i] firstName.toLowerCase () फिर css में, टेक्स्ट-ट्रांसफॉर्म: capitalize

— pdschuller

ओपी जेएस का उल्लेख नहीं करता है।

— JDuarteDJ

इनपुट के लिए धन्यवाद, लेकिन सवाल ने केवल सीएसएस के दृष्टिकोण को सीमित नहीं किया।

— रौनक

क्या आप नीचे दिए गए वोट से @JDuarteDJ को हटा सकते हैं? फिर, मेरा जवाब उसी के अनुसार है जिस पर सवाल उठाया गया था। और अगर आप देखते हैं कि क्या जवाब के रूप में चुना गया था जावास्क्रिप्ट का उपयोग करता है, यहां तक कि jQuery भी। धन्यवाद।

— रौनक 17

26

दिलचस्प सवाल!

capitalizeकिसी शब्द के हर पहले अक्षर को अपरकेस में बदल देता है, लेकिन यह अन्य अक्षरों को लोअरकेस में नहीं बदलता है। :first-letterछद्म वर्ग भी इसे नहीं काटेगा (क्योंकि यह प्रत्येक तत्व के पहले अक्षर पर लागू होता है, प्रत्येक शब्द पर नहीं), और मैं वांछित परिणाम प्राप्त करने के लिए लोअरकेस और पूंजीकरण के संयोजन का एक तरीका नहीं देख सकता।

जहां तक मैं देख सकता हूं, सीएसएस के साथ ऐसा करना वास्तव में असंभव है।

@Harmen अपने जवाब में अच्छे दिखने वाले PHP और jQuery के वर्कअराउंड दिखाता है।

— पेका
स्रोत

1

अजीब बात है, मुझे उम्मीद है कि 'एक {टेक्स्ट-ट्रांसफॉर्मेशन: लोअरकेस}} काम करेगा। लेकिन यह नहीं है।

— Kwebble

1

यह उत्तर देता है कि ऐसा क्यों हो रहा है। :) यह समाधान से बेहतर है।

— असीम केटी

बहुत अच्छा स्पष्टीकरण @Pekka @ सीएसएस से कुछ अप्रत्याशित व्यवहार। आशा करते हैं कि पाइपलाइन में एक सुधार है।

— एरॉन मैथ्यूज

1

@Pekka provided मैंने एक उत्तर प्रदान किया जो सीएसएस में यह पूरी तरह से करने के करीब आता है। एक बार प्रति पंक्ति सीमा होती है, लेकिन मुझे लगता है कि यह ज्यादातर मामलों के लिए उपयुक्त है।

— JDuarteDJ

9

मैं एक शुद्ध सीएसएस समाधान का उपयोग करना चाहता हूं जो प्रस्तुत किए गए पहले पत्र समाधान की तुलना में अधिक उपयोगी है, लेकिन यह भी बहुत समान है।

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

स्निपेट का विस्तार करें

यद्यपि यह पहली पंक्ति तक सीमित है, यह पहले अक्षर समाधान की तुलना में अधिक उपयोग के मामलों के लिए उपयोगी हो सकता है क्योंकि यह पूरी पंक्ति में पूंजीकरण लागू करता है और न केवल पहला शब्द। (पहली पंक्ति में सभी शब्द) ओपी के विशिष्ट मामले में यह इसे हल कर सकता था।

नोट: जैसा कि पहले अक्षर समाधान टिप्पणियों में उल्लेख किया गया है , सीएसएस नियमों का क्रम महत्वपूर्ण है! यह भी ध्यान दें कि मैंने <a>एक टैग के लिए टैग को बदल दिया <div>क्योंकि किसी कारण से छद्म तत्व देशी रूप::first-line से <a>टैग के साथ काम नहीं करता है या तो ठीक है या ठीक है। संपादित करें: तत्व काम करेंगे , तो करने के लिए जोड़ा है वर्ग। इसके लिए डेव लैंड का धन्यवाद !<div><p><a>display: inline-block;.link

नया नोट: यदि पाठ लपेटता है तो यह पूंजीकरण को ढीला कर देगा क्योंकि यह अब दूसरी पंक्ति में है (पहली पंक्ति अभी भी ठीक है)।

— JDuarteDJ
स्रोत

1

आपका ( not working )उदाहरण जोड़कर काम करने के लिए बनाया जा सकता है display: inline-block;के लिए .linkशैली।

— डेव लैंड

मामले में css के माध्यम से अच्छा समाधान जब कैप्स में सभी पत्र शुरू में होते हैं

— हसन अली शहज़ाद

5

जावास्क्रिप्ट:

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

सीएसएस:

.link { text-transform: capitalize; }

खान ने "समाप्त कर दिया" (जो कि क्लीनर है और मेरे लिए काम किया है) उत्तर के रूप में चिह्नित पोस्ट की टिप्पणियों में नीचे है।

— ryanttb
स्रोत

4

captializeकेवल शब्द के पहले अक्षर को प्रभावित करता है। http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

— prodigitalson
स्रोत

1

यह उत्तर इस तथ्य के बावजूद रचनात्मक नहीं है कि ओपी के पास समस्या क्यों है, इस बारे में स्पष्टीकरण प्रदान करता है।

— JDuarteDJ

@JDuarteDJ मुझे लगता है कि स्रोत की समस्या को जानना महत्वपूर्ण है, जो कि मामला है। वशीकरण तार को सामान्य नहीं करता है, लेकिन केवल पहला आइटम मिलता है और इसे एक बड़े अक्षर में बदल देता है। मुझे यह जानकारी वास्तव में उपयोगी

— लगी

3

जावा और जेस्टल के लिए उपयोगी हो सकता है।

स्थानीयकृत संदेश के साथ आरंभिक चर।
उसके बाद jstl toLowerCase फ़ंक्शन में इसका उपयोग करना संभव है।
सीएसएस के साथ रूपांतरण।

जेएसपी में

1।

<fmt:message key="some.key" var="item"/>

2।

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

सीएसएस में

3।

.content {
  text-transform:capitalize;
}

— ekar
स्रोत

मेरे मामले में मैं ${fn:toLowerCase(some.key)}सीधे कर सकता था , बिना उपयोग किए fmt:message। धन्यवाद।

— राफेलडीडीएल

3

आप इसे सीएसएस प्रथम-पत्र के साथ कर सकते हैं! उदाहरण के लिए मैं इसे मेनू के लिए चाहता था:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

यह केवल ब्लॉक तत्वों से चलता है - इसलिए इनलाइन-ब्लॉक!

— जोहानिस
स्रोत

यह वह नहीं है जो ओपी ने पूछा है, यह छोटे कैप नहीं है।

— JDuarteDJ

2

यदि डेटा किसी डेटाबेस से आ रहा है, जैसा कि मेरे मामले में, आप इसे चयन सूची / ड्रॉप डाउन सूची में भेजने से पहले कम कर सकते हैं। शर्म करो आप इसे CSS में नहीं कर सकते।

— JohnnyBizzle
स्रोत

1

बहुत अधिक शोध करने के बाद, मुझे केवल अपरकेस में पहले अक्षर में पाठ को बदलने के लिए jquery फ़ंक्शन / अभिव्यक्ति मिली, मैंने इनपुट फ़ील्ड के लिए इसे काम करने योग्य बनाने के लिए उस कोड को तदनुसार संशोधित किया। जब आप इनपुट क्षेत्र में कुछ लिखेंगे और फिर किसी अन्य दायर या तत्व में जाएंगे, तो उस क्षेत्र का पाठ केवल 1-अक्षर कैपिटलाइज़ेशन के साथ बदल जाएगा। कोई फर्क नहीं पड़ता कि उपयोगकर्ता टाइप पाठ को पूर्ण निम्न या ऊपरी केस कैपिटलाइज़ेशन में:

इस कोड का पालन करें:

Step-1: html हेड में jquery लाइब्रेरी को कॉल करें:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

चरण -2: इनपुट फ़ील्ड के टेक्स्ट को बदलने के लिए कोड लिखें:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

चरण -3: एक ही आईडी के साथ HTML इनपुट फ़ील्ड बनाएं जिसका उपयोग आप jquery कोड में करते हैं:

<input type="text" id="edit-submitted-first-name" name="field name">

इस इनपुट फ़ील्ड की आईडी है: संपादित-प्रस्तुत-प्रथम-नाम (यह चरण -2 में jquery कोड का उपयोग करके)

** परिणाम: सुनिश्चित करें कि जब आप किसी अन्य तत्व पर उस इनपुट फ़ील्ड से अपना ध्यान स्थानांतरित करने के बाद पाठ बदल जाएगा। क्योंकि हम यहां jquery के फोकस इवेंट का उपयोग कर रहे हैं। परिणाम इस तरह होना चाहिए: उपयोगकर्ता प्रकार: "धन्यवाद" यह "धन्यवाद" के साथ बदल जाएगा। **

शुभकामनाएँ

— A.Aleem11
स्रोत

0

बैकएंड में PHP सॉल्यूशन:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

— फेलिप सांचे
स्रोत

-1

मुझे पता है कि यह एक देर से प्रतिक्रिया है, लेकिन यदि आप विभिन्न समाधानों के प्रदर्शन की तुलना करना चाहते हैं, तो मेरे पास एक jsPerf है जो मैंने बनाया है।

रेगेक्स समाधान सुनिश्चित करने के लिए सबसे तेज़ हैं।

ये रहा jsPerf: https://jsperf.com/capitalize-jwaz

2 रेगेक्स समाधान हैं।

पहला प्रयोग करता है /\b[a-z]/g। शब्द सीमा गैर-प्रकटीकरण के लिए गैर-प्रकटीकरण जैसे पूंजी शब्द होगी।

यदि आप केवल उन अक्षरों को कैपिटलाइज़ करना चाहते हैं जो एक स्थान से पहले हैं तो दूसरे रेगेक्स का उपयोग करें

/(^[a-z]|\s[a-z])/g

— ज़री होगन
स्रोत

-1

यदि आप jQuery का उपयोग कर रहे हैं; यह इसे करने का एक तरीका है:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

यहाँ एक ही काम कर रहे संस्करण को पढ़ना आसान है:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

डेमो

— fooaldrin
स्रोत

मुझे नहीं लगता कि ओपी jQuery का उपयोग करता है।

— JDuarteDJ

-6

सभी गलत यह मौजूद है -> फ़ॉन्ट-संस्करण: छोटे-कैप;

पाठ-परिणत: भुनाने; सिर्फ पहला अक्षर कैप

— ऑरलैंडो
स्रोत

वह बिल्कुल नहीं है जो ओपी चाहता था। वह उम्मीद करता है कि उत्पादन में केवल पहले अक्षर के अक्षरों का ही पूंजीकरण होगा; पूरी स्ट्रिंग नहीं।

— एंड्रयू नाई

उस प्रश्न में एक अति सूक्ष्म अंतर है जिसे आप नहीं मान रहे हैं: text-transform: capitalize;उस पाठ को परिवर्तित नहीं करता है जो पहले से ही सभी कैप्स है। प्रश्न फिर से देखें: उपयोगकर्ता ने पहले ही कोशिश की थी।

— एंड्रयू नाई

फिर स्पैन टैग का उपयोग ब्रेकअप के लिए किया जा सकता है।

— ऑरलैंडो