সিএসএস পাঠ্য-রূপান্তর সমস্ত ক্যাপের মূলধনকে রূপান্তর করুন

Question

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

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

এখানে আমার সিএসএস:

.link {text-transform: capitalize;}

আউটপুটটি হ'ল:

Small Caps & ALL CAPS

এবং আমি আউটপুটটি চাই:

Small Caps & All Caps

কোন ধারনা?

Comments

@ মার্সেল - এটির দরকার নেই, এটির পরে একটি স্থান রয়েছে, সুতরাং এটি পুরোপুরি বৈধ আক্ষরিক অ্যাম্পারস্যান্ড (ডকুমেন্টটি এক্সএইচটিএমএল না হলে, তবে এটির কোনও পরামর্শ নেই)

— কোয়ান্টিন

@ ডেভিড - ওহ, আমি জানতাম না এটিও একটি বৈধ স্বরলিপি। ধন্যবাদ, এখানে সবসময় নতুন কিছু শেখার আছে।

— মার্সেল করপেল

Answer 1

সিএসএস দিয়ে এটি করার কোনও উপায় নেই, আপনি এই জন্য পিএইচপি বা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

পিএইচপি উদাহরণ:

$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();​

Comments

হ্যাঁ, সম্ভবত এটি করার একমাত্র উপায় (গুলি)।

— পেক্কা

এই লুপ + সাবস্ট্রিংগুলির পরিবর্তে নিয়মিত প্রকাশের সাথে এটি আরও ভাল - তবে জাভাস্ক্রিপ্টের নিয়মিত প্রকাশগুলিতে আপনি কীভাবে একটি চিঠি বড় হাতের অক্ষরে রাখতে পারেন?

— হারমেন

আপনি যদি এটি সার্ভার-সাইডে করতে যাচ্ছেন তবে আপনি পুরো স্ট্রিংটি ছোট করে রাখতে পারেন তবে সিএসএসকে মূলধন করতে দিন। শুধু একটি ভাবনা.

— স্টিফেন পি

আমি পুরো স্ট্রিংয়ে .toLowerCase () করা শেষ করেছিলাম, তারপরে সিএসএস ব্যবহার করে মূলধন তৈরি করতে পারি। পরামর্শের জন্য ধন্যবাদ!

— খান

@ গ্লেনফেরি আপনি যে সিএসএসের সাথে কথা বলছেন তার কেবলমাত্র কী সমাধান আপনি যদি আমাদের সাথে এটি ভাগ করে নিতে আপত্তি করেন না? :-)

— জলরাশী

Answer 2

আপনি প্রায় এটি দিয়ে করতে পারেন :

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

এটি আপনাকে আউটপুট দেবে:

Small caps
All caps

Comments

এটি একটি মোহন মত কাজ করে, আপনাকে ধন্যবাদ !, আদেশটি গুরুত্বপূর্ণ, এর সাথে লাইন: প্রথম অক্ষরগুলি ছোট হাতের রেখার পরে থাকতে হবে।

— স্টিভেন লিজারাজো

এটির জন্য। লিঙ্ক উপাদানগুলি ব্লক উপাদান হিসাবে প্রদর্শিত হবে বলে মনে হচ্ছে। (প্রদর্শন: ইনলাইন-ব্লক;) jsfiddle.net/7y7wqqhb/1

— টরিন

চতুর চিন্তা, ভাল কাজ ফিলিপ। "প্রদর্শন: ইনলাইন-ব্লক" দেখানোর জন্য টরিন ভালভাবে সম্পন্ন হয়েছে।

— ক্রিস মেন্ডেস

তবে এটি পছন্দসই ফলাফল দেয় না। এটি কেবলমাত্র উপাদানের প্রথম অক্ষরকে মূলধন করে যখন প্রশ্ন প্রতিটি শব্দের প্রথম অক্ষরকে মূলধন করতে বলে। এটি 'সমস্ত ক্যাপ' তৈরি করে তবে প্রয়োজনীয় 'সমস্ত ক্যাপস'

— মনপ্রীত সিংহ

@ মানিপরিসিংহ সঠিক, সে কারণেই আমি বলেছিলাম এটি প্রায় কার্যকর । প্রশ্নটি যা জিজ্ঞাসা করেছিল ঠিক এটি নাও হতে পারে তবে প্রায়শই আপনার অনুমানটি নমনীয় এবং একটি সহজ সমাধানই পছন্দনীয়।

— ফিলিহপ বুসবি

Answer 3

ব্যবহার জাভাস্ক্রিপ্ট রূপান্তর করুন .toLowerCase()এবং capitalizeবিশ্রাম করতে হবে।

Comments

হাঁ। আমি মডেল আইটেম iterated এবং myArray মত [আমি] .firstName = myArray [আমি] firstName.toLowerCase () CSS এ রূপান্তরিত তারপর তাদের toLowerCase, পাঠ্য-রুপান্তর: পুঁজিতে

— pdschuller

ওপি জেএসের কথা উল্লেখ করেনি।

— জেডুয়ার্টেডিজে

ইনপুট দেওয়ার জন্য ধন্যবাদ, তবে প্রশ্নটি কেবল সিএসএসের কাছেই পদ্ধতির সীমাবদ্ধ করেনি।

— ronnyfm

আপনি কি দয়া করে @ জেডুয়ার্টেডিজে ডাউন ভোটটি সরিয়ে ফেলতে পারেন? আবার, আমার উত্তর সেই অনুসারে যা প্রশ্নবিদ্ধ হয়েছিল to এবং যদি আপনি দেখতে পান যে উত্তর হিসাবে যা নির্বাচিত হয়েছিল তা জাভাস্ক্রিপ্ট, এমনকি jQuery ব্যবহার করে। ধন্যবাদ।

— ronnyfm

Answer 4

মজার প্রশ্ন!

capitalizeএকটি শব্দের প্রতিটি প্রথম অক্ষর বড় হাতের দিকে রূপান্তর করে তবে এটি অন্যান্য অক্ষরকে ছোট হাতের কাছে রূপান্তর করে না । এমনকি না:first-letter ছদ্ম-শ্রেণিও এটি কাটবে না (কারণ এটি প্রতিটি উপাদানের প্রথম অক্ষরের ক্ষেত্রে প্রযোজ্য, প্রতিটি শব্দের নয়), এবং আমি ছোট হাতের সংমিশ্রনের কোনও উপায় দেখতে পাচ্ছি না এবং পছন্দসই ফলাফলটি অর্জনের জন্য মূলধন তৈরি করতে পারি না।

আমি যতদূর দেখতে পাচ্ছি, CSS এর সাথে এটি করা অসম্ভব।

@ হারমান তার উত্তরে পিএইচপি এবং জকিউয়ের কাজগুলি ভাল দেখায়।

Comments

আজব, আমি প্রত্যাশা করেছি যে 'একটি {পাঠ্য-রূপান্তর: ছোট হাতের}' যুক্ত হবে। তবে তা হয় না।

— কুয়েবল

কেন এটি হচ্ছে তা উত্তর দেয় answers :) এটি সমাধানের চেয়ে ভাল।

— অসীম কেটি

@ পেক্কা Very CSS এর কিছু অপ্রত্যাশিত আচরণ Very আসুন আশা করি পাইপলাইনে কোনও সংশোধন হয়েছে।

— অ্যারন ম্যাথিউজ

@ পেপকা 웃 আমি একটি উত্তর সরবরাহ করেছি যা সিএসএসে খাঁটিভাবে এটি করার খুব কাছাকাছি আসে। প্রতি লাইন সীমাবদ্ধতা একবারেই রয়েছে তবে আমি মনে করি এটি বেশিরভাগ ক্ষেত্রে উপযুক্ত its

— জেডুয়ার্টেডিজে

Answer 5

আমি একটি খাঁটি সিএসএস সমাধানটি সাগেট করতে চাই যা উপস্থাপিত প্রথম অক্ষরের সমাধানের চেয়ে বেশি কার্যকর তবে এটিও একইরকম।

.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

নতুন দ্রষ্টব্য: যদি পাঠ্যটি মোড়ানো হয় তবে এটি মূলধনকে শিথিল করবে কারণ এটি এখন দ্বিতীয় লাইনে রয়েছে (প্রথম লাইনটি এখনও ঠিক আছে)।

Comments

আপনার ( not working )উদাহরণটি শৈলীতে যোগ display: inline-block;করে কাজ করা যায় .link।

— ডেভ ল্যান্ড

মামলায় সিএসএসের মাধ্যমে শুভ সমাধান যখন প্রথম দিকে ক্যাপগুলিতে সমস্ত চিঠি

— হাসান আলী শাহজাদ

Answer 6

javascript:

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

সিএসএস:

.link { text-transform: capitalize; }

---

খান "কাজটি শেষ করেছেন" (যা পরিস্কার এবং আমার পক্ষে কাজ করেছেন) তার উত্তর হিসাবে চিহ্নিত পোস্টটির মন্তব্যে এই মন্তব্যটি লিখেছেন।

Answer 7

captializeশুধুমাত্র শব্দের প্রথম অক্ষরকেই প্রভাবিত করে। http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Comments

এই উত্তরটি সত্যিকার অর্থে গঠনমূলক নয় তবে এটি ওপি কেন সমস্যাটি নিয়ে আসছে তার একটি ব্যাখ্যা সরবরাহ করে।

— JDuarteDJ

@ জেডুয়ার্টেডিজে আমি মনে করি উত্স সমস্যাটি জানা গুরুত্বপূর্ণ, কোনটি ক্ষেত্রে। ক্যাপটিলাইজ করা স্ট্রিংগুলিকে স্বাভাবিক করে না তবে কেবল প্রথম আইটেম পায় gets এবং এটিকে বড় হাতের অক্ষরে রূপান্তরিত করে। আমি এই তথ্যটি সত্যিই দরকারী পেয়েছি

— রডরিগো বোরবা

Answer 8

জাভা এবং জেএসটিএল জন্য দরকারী হতে পারে।

1. স্থানীয়করণকৃত বার্তা দিয়ে ভেরিয়েবল শুরু করুন।
2. এর পরে এটি jstl toLoverCase ফাংশনে ব্যবহার করা সম্ভব।
3. সিএসএস দিয়ে রূপান্তর করুন।

জেএসপিতে

1।

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

2।

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

সিএসএসে

3।

.content {
  text-transform:capitalize;
}

Comments

আমার ক্ষেত্রে আমি ${fn:toLowerCase(some.key)}ব্যবহার না করেই সরাসরি করতে পারতাম fmt:message। ধন্যবাদ।

— রাফেলডিডিএল

Answer 9

আপনি সিএসএস প্রথম-অক্ষর দিয়ে এটি করতে পারেন! যেমন আমি মেনুর জন্য এটি চেয়েছিলাম:

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

এটি কেবল ব্লক উপাদানগুলির সাথেই চালিত হয় - সুতরাং ইনলাইন-ব্লক!

Comments

এটি ওপি যা চেয়েছিল তা নয়, এটি ছোট ক্যাপস নয়।

— JDuarteDJ

Answer 10

যদি ডেটা ডাটাবেস থেকে আসে, যেমনটি আমার ক্ষেত্রে, আপনি এটি একটি নির্বাচিত তালিকা / ড্রপ ডাউন তালিকায় প্রেরণের আগে এটি কমিয়ে দিতে পারেন। লজ্জাজনকভাবে আপনি এটি CSS এ করতে পারবেন না।

Answer 11

অনেকগুলি গবেষণার পরে আমি কেবল বড় হাতের অক্ষরে প্রথম বর্ণের পাঠ্য পরিবর্তন করতে jquery ফাংশন / এক্সপ্রেশন পেয়েছি, আমি কোডটি ইনপুট ক্ষেত্রে কার্যকর করার জন্য সেই অনুযায়ী সংশোধন করি। আপনি যখন ইনপুট ক্ষেত্রে কিছু লিখবেন এবং তারপরে অন্য কোনও দায়েরকৃত বা উপাদানটিতে চলে যাবেন তখন field ক্ষেত্রটির পাঠ্যটি কেবলমাত্র প্রথম-অক্ষরের মূলধন দিয়ে পরিবর্তন হবে। সম্পূর্ণ লোয়ার বা আপার কেস ক্যাপিটালাইজেশনে ব্যবহারকারী টাইপের পাঠ্য নয়:

এই কোডটি অনুসরণ করুন:

পদক্ষেপ -১: এইচটিএমএল হেডে কল করুন jquery লাইব্রেরি:

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

পদক্ষেপ -২: ইনপুট ক্ষেত্রগুলির পাঠ্য পরিবর্তন করতে কোড লিখুন:

<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: আপনি যেমন jquery কোড ব্যবহার করেন একই আইডি সহ এইচটিএমএল ইনপুট ক্ষেত্রগুলি তৈরি করুন:

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

এই ইনপুট ক্ষেত্রটির আইডি হ'ল: সম্পাদনা-জমা দেওয়া-প্রথম-নাম (এটি স্টেপ -2-তে jquery কোড ব্যবহার করে)

** ফলাফল: আপনি নিশ্চিত করে নিন যে কোনও উপাদানটিতে আপনার ইনপুট ক্ষেত্রটি থেকে আপনার ফোকাসটি সরানোর পরে পাঠ্যটি পরিবর্তন হবে। কারণ আমরা এখানে jquery এর ফোকাস আউট ইভেন্ট ব্যবহার করছি। ফলাফলগুলি এটি পছন্দ করতে পারে: ব্যবহারকারীর প্রকার: "আপনাকে ধন্যবাদ" এটি "থ্যাঙ্ক ইউ" দিয়ে পরিবর্তিত হবে। **

ভাগ্য সুপ্রসন্ন হোক

Answer 12

পিএইচপি সমাধান, ব্যাকএন্ডে:

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

Answer 13

আমি জানি এটি একটি দেরী প্রতিক্রিয়া তবে আপনি যদি বিভিন্ন সমাধানের পারফরম্যান্সের তুলনা করতে চান তবে আমার তৈরি একটি জেএসফিউর রয়েছে।

রেগেক্স সমাধানগুলি দ্রুততম।

এখানে জেএসফিউর: https://jsperf.com/capitalize-jwaz

2 টি রেজেক্স সমাধান রয়েছে।

প্রথমটি ব্যবহার করে/\b[a-z]/g । শব্দের সীমানা অ-প্রকাশ-অন-প্রকাশের মতো শব্দকে মূলধন করে।

আপনি যদি কেবলমাত্র কোনও স্পেসের আগে থাকা অক্ষরগুলি মূলধন করতে চান তবে দ্বিতীয় রেজেেক্স ব্যবহার করুন

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

Answer 14

যদি আপনি 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');
});

ডেমো

Comments

আমি মনে করি না ওপি jQuery ব্যবহার করে।

— জেডুয়ার্টেডিজে

Answer 15

সমস্ত ভুল এটি বিদ্যমান -> ফন্ট-রূপ: ছোট ক্যাপস;

text-রুপান্তর: পুঁজিতে; ঠিক প্রথম লেটার ক্যাপ

Comments

ওপি যা চেয়েছিল তা মোটেই নয়। তিনি আশা করেন যে আউটপুটটি কেবলমাত্র শব্দের প্রথম অক্ষরই মূলধন হবে; পুরো স্ট্রিং না।

— অ্যান্ড্রু বারবার

আপনি যে প্রশ্নটি অনুধাবন করছেন না সেটিতে একটি উপকার রয়েছে: text-transform: capitalize;ইতিমধ্যে সমস্ত ক্যাপযুক্ত পাঠ্যকে পরিবর্তন করে না। প্রশ্নটি আবার দেখুন: ব্যবহারকারী ইতিমধ্যে এটি চেষ্টা করেছে।

— অ্যান্ড্রু বার্বার

তারপরে কোন শব্দটি তারা সমস্ত ক্যাপ এবং ছোট ক্যাপগুলি চায় তা ব্রেকআপ করতে স্প্যান ট্যাগ ব্যবহার করতে পারে।

— অরল্যান্ডো