সিএসএসে প্রথম অক্ষর বড় হাতের অক্ষর করুন


255

প্রথম চরিত্রটি বড় হাতের করার কোনও উপায় আছে কি? একটি লেবেলে ?

এখানে আমার এইচটিএমএল:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>


2
নির্দিষ্ট করতে - প্রথম অক্ষর এবং কেবল প্রথমটি। যার ফলে text-transform: capitalize;যখন একাধিক শব্দ থাকার যথেষ্ট নয়
wiktus239

উত্তর:


622

এর জন্য একটি সম্পত্তি আছে:

a.m_title {
    text-transform: capitalize;
}

যদি আপনার লিঙ্কগুলিতে একাধিক শব্দ থাকতে পারে এবং আপনি কেবল প্রথম শব্দের প্রথম অক্ষরটি বড় হাতের হতে চান তবে :first-letterপরিবর্তে একটি ভিন্ন রূপান্তর ব্যবহার করুন (যদিও এটি সত্যিকার অর্থে কোনও ব্যাপার নয়)। নোট যাতে জন্য :first-letterকাজ করার জন্য আপনার aউপাদানের ব্লক পাত্রে হতে হবে (হতে পারে যা display: block, display: inline-blockঅথবা এক বা একাধিক বৈশিষ্ট্য অন্যান্য সমন্বয় বিভিন্ন কোন):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

3
@ অ্যালানজডস: হ্যাঁ, এটি আই এস এর প্রতিটি সংস্করণে কাজ করে যা CSS সমর্থন করে। এটি অনেক পুরানো প্রযুক্তি।
BoltClock

3
আপনি একটি ডাবল সেমি কোলন ব্যবহার করতে চাইতে পারেন, css-tricks.com/almanac/selectors/f/first-letter দেখুন
ndequeker

5
@ ভোলস: আপনার যদি আইই 8 বা তার বেশি বয়সীদের সমর্থন করার প্রয়োজন না হয় তা নিশ্চিত। না চাইলে আপনি ডাবল কলোন ব্যবহার করতে পারবেন না। (এর মূল্য কী, এই উত্তরটির সময় যা আড়াই বছর আগে পোস্ট করা হয়েছিল, আমার ব্যক্তিগত নীতিটি
আইই

1
দ্রষ্টব্য, যদি display: blockপ্রয়োজনীয়তা ( এটি কেন হয় তা কে জানে) যদি এটিকে কঠিন করে তোলে তবে :first-letterতাও কাজ করে display: inline-block
মিত্য

1
@ হেনরি গার্সিয়া দে গুজম্যান: কারণ সেই প্রথম অক্ষরটিই নয় (প্রতিটি শব্দ বা বাক্য বা যাই হোক না কেন) সমস্ত কিছু বড় করে ফেলেছে।
BoltClock

55

নোট করুন যে ::first-letterনির্বাচক ইনলাইন উপাদানগুলির সাথে কাজ করে না, সুতরাং এটি অবশ্যই হয় blockবা হয় inline-blockনিম্নলিখিত হিসাবে:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

1
আমার ক্ষেত্রে পুরো লেখাটি ইতিমধ্যে রাজধানীতে ছিল, সুতরাং আমাকে পাঠ্য-রূপান্তরটি যুক্ত করতে হয়েছিল: .m_title এ ছোট হাতের অক্ষর এবং এখন এটি পুরোপুরি কার্যকর হয়!
hjuster


15

আমি ব্যবহার করার পরামর্শ দিচ্ছি

#selector {
    text-transform: capitalize;
}

অথবা

#selector::first-letter {
    text-transform: uppercase;
}

যাইহোক, এই w3schools লিঙ্কটি চেক করুন: http://www.w3schools.com/cssref/pr_text_text-transform.asp


2
ভাল উত্তর, তবে এটি অবশ্যই ডাব্লু 3 সি ডকুমেন্টেশনের লিঙ্ক নয়
স্টেফান

1
আরে, দয়া করে নোট করুন: পাঠ্য-রূপান্তর 'প্রাথমিক' এর অর্থ 'প্রথম বর্ণটিকে বড় করে তোলা' নয়। বরং এটির অর্থ 'এই সম্পত্তির প্রাথমিক, ডিফল্ট মানটিতে ফিরে আসা'।
মার্কোস বুয়ার্ক

ধন্যবাদ, আমি উভয় প্রস্তাবিত সমাধানগুলি প্রয়োগ করেছি।
মার্কোস বুয়ার্ক

5

প্রথমে এটিকে ছোট ছোট করে তুলুন:

.m_title {text-transform: lowercase}

তারপরে এটিকে প্রথম অক্ষরের বড় হাতের অক্ষরে তৈরি করুন:

.m_title:first-letter {text-transform: uppercase}

"পাঠ্য-রূপান্তর: মূলধন" শব্দটির জন্য কাজ করে; তবে আপনি যদি বাক্যগুলির জন্য ব্যবহার করতে চান তবে এই সমাধানটি সঠিক।


2
: প্রথম-পত্র inlineউপাদানগুলির সাথে কাজ করে না , display:inline-blockযদি এটি আপনার ক্ষেত্রে হয় তবে সেট করুন। ( Stackoverflow.com/questions/7631722/... )
Fanky

1
<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

এটা আমার কাজ। ধারণা .. প্রতিটি অক্ষরের প্রতিটি শব্দ প্রথম চিত্রের ক্যাপ
জ্ঞান সেকার

-2

আমি আপনাকে সিএসএসে নিম্নলিখিত কোডটি ব্যবহার করার পরামর্শ দিচ্ছি:

    text-transform:uppercase; 

আপনি এটি আপনার ক্লাসে রেখেছেন তা নিশ্চিত করুন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.