আমি কীভাবে CSS এর মাধ্যমে পাঠ্য প্রতিস্থাপন করতে পারি?

Question

আমি এই জাতীয় পদ্ধতি ব্যবহার করে কীভাবে CSS এর সাথে পাঠ্য প্রতিস্থাপন করতে পারি:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

পরিবর্তে ( img[src*="IKON.img"] ) এর , আমার এমন কিছু ব্যবহার করা দরকার যা পরিবর্তে পাঠ্য প্রতিস্থাপন করতে পারে।

[ ]এটি কাজ করতে আমাকে ব্যবহার করতে হবে।

<div class="pvw-title">Facts</div>

আমাকে " তথ্য " প্রতিস্থাপন করতে হবে need

Comments

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

— স্যার

জাভাস্ক্রিপ্ট ব্যবহার করার জন্য ডিওএম লোড হওয়া প্রয়োজন, সুতরাং একটি FOUC রয়েছে। এইচটিএমএল সার্ভার-সাইড তৈরি না করেই কোনও FOUC এড়িয়ে যাওয়ার সময় কোয়েরি স্ট্রিং থেকে বের করা সামগ্রীর সাথে পাঠ্য প্রতিস্থাপন করতে আমি এটি করতে চাই (যার ফলে এইচটিএমএলকে আক্রমণাত্মকভাবে ক্যাশে দেওয়া এবং সিডিএন থেকে পরিবেশন করা যায়)।

— nemequ

প্রশ্নটি সিএসএস দিয়ে এটি কীভাবে করবেন। আমি এমন একটি সিএমএস ব্যবহার করছি যা কেবলমাত্র আমাকে সিএসএস পরিবর্তন করতে দেয়, এজন্যই উত্তরটির জন্য গুগল করার সময় আমি এই পৃষ্ঠায় পৌঁছেছি, অন্যরকম নয়। সে কারণেই আমরা জিজ্ঞাসা করা প্রশ্নটির উত্তর দিয়েছি কেন জিজ্ঞাসারীর পরিস্থিতি আলাদা নয় asking

— felwithe

Answer 1

অথবা আপনি 'ফ্যাক্টস' রাউন্ড a এ মোড়াতে পারেন <span> হিসাবে :

<div class="pvw-title"><span>Facts</span></div>

তারপরে ব্যবহার করুন:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

Comments

দুর্দান্ত, তবে এটি কেবল সিএসএসের চেয়ে HTML এ পরিবর্তন।

— মাইকম্যাকানা

কখনও কখনও এটি আপনার একমাত্র বিকল্প

— লোকালিজাক

স্প্যান {প্রদর্শন: কিছুই নয়; the এর ছদ্ম উপাদানটিও আড়াল করা উচিত। আপনার দৃশ্যমানতাটি ব্যবহার করা উচিত: পরিবর্তে লুকানো

— xryl669

প্রদর্শন: কিছুই নয়; এবং দৃশ্যমানতা: লুকানো; দুজনেই ছদ্ম উপাদানটি লুকান

— ফ্যাসুন্দো কলম্বিয়ার

@ ম্যাথিউ স্প্যানটি গোপন করছে তবে সিউডো উপাদানটি ডিভের সাথে যুক্ত করছে, সুতরাং ছদ্ম উপাদানটি গোপন করা উচিত নয় (হয় দৃশ্যমানতা বা প্রদর্শন সম্পত্তি ব্যবহার করে)

— দেউটিয়া

Answer 2

বাধ্যতামূলক : এটি একটি হ্যাক: সিএসএস এটি করার জন্য সঠিক জায়গা নয়, তবে কিছু পরিস্থিতিতে - যেমন, আপনার কাছে একটি আইফ্রেমে একটি তৃতীয় পক্ষের লাইব্রেরি রয়েছে যা কেবল সিএসএস দ্বারা অনুকূলিতকরণ করা যেতে পারে - এই ধরণের হ্যাকই একমাত্র বিকল্প ।

আপনি CSS এর মাধ্যমে পাঠ্য প্রতিস্থাপন করতে পারেন। 'বিদায়' বলে একটি লাল বোতামের সাহায্যে 'হ্যালো' দিয়ে একটি সবুজ বোতামটি প্রতিস্থাপন করা যাকসিএসএস ব্যবহার করে ।

আগে:

পরে:

Http://jsfiddle.net/ZBj2m/274/ দেখুনলাইভ ডেমো জন্য :

এখানে আমাদের সবুজ বোতামটি রয়েছে:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

এখন আসল উপাদানটি লুকিয়ে রাখি, তবে এর পরে অন্য একটি ব্লক উপাদান যুক্ত করুন:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

বিঃদ্রঃ:

• আমাদের স্পষ্টতই এটি একটি ব্লক উপাদান হিসাবে চিহ্নিত করতে হবে, 'পরে' উপাদানগুলি ডিফল্টরূপে ইনলাইন থাকে
• সিউডো-এলিমেন্টের অবস্থানটি সামঞ্জস্য করে আমাদের মূল উপাদানটির ক্ষতিপূরণ করতে হবে।
• আমাদের অবশ্যই মূল উপাদানটি লুকিয়ে রাখতে হবে এবং সিউডো উপাদানটি ব্যবহার করে প্রদর্শন করতে হবে visibility। display: noneমূল উপাদানটিতে নোট কাজ করে না।

Comments

এটি অর্থাত্ 10 তে কাজ করে না, এটি করার জন্য কীভাবে এটি পরিবর্তন করতে হবে কোনও ধারণা?

— সলমেড

display: none;কার্যকারী নয় কারণ ::afterসত্যিকার অর্থে "এই উপাদানটির অভ্যন্তরে, তবে শেষে", যদি কেউ আগ্রহী হয়।

— রাই-

দুর্ভাগ্যক্রমে, "পরিবর্তিত" বোতামটি আর বোতামের মতো কাজ করে না। এটি একটি ভাল উদাহরণ, কেবলমাত্র এটি কোনও বোতামে প্রযোজ্য নয়।

— xryl669

প্রদর্শন: কিছুই নয়; এবং দৃশ্যমানতা: লুকানো; দুজনেই ছদ্ম উপাদানটি লুকান

— ফ্যাসুন্দো কলম্বিয়ার

যখন আমি এটি করি তখন এটি উপাদানটি প্রতিস্থাপন করে তবে পাঠ্যটি সমস্ত ক্যাপ হয় এবং ছোট হাতের অক্ষরে পরিবর্তন করা যায় না?

— জাপাজি রজনীশ

Answer 3

আপনি যদি ছদ্ম উপাদান ব্যবহার করতে ইচ্ছুক হন এবং তাদের সামগ্রী letোকাতে দেন তবে আপনি নিম্নলিখিতটি করতে পারেন। এটি মূল উপাদানটির জ্ঞান ধরে না এবং অতিরিক্ত মার্কআপের প্রয়োজন হয় না।

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

জেএসফিডাল উদাহরণ

Comments

এই উত্তরটি এমন জায়গায় কাজ করে যেখানে অন্যান্য বেশিরভাগ উত্তর যেমন কোনও <th>উপাদানের ভিতরে টেক্সট নোডের মতো না ।

— ক্রিস কেরিকস 13

এটি ভাল কাজ করে। আমার ক্ষেত্রে, line-height: 0এবং color: transparentমূল উপাদানটিতে এবং সিউডোতে সেই মানগুলি পুনরায় সেট করে কাজটি করুন (কোনও text-indent

— হতাশাই নেই

এর line-height: normalপরিবর্তে হওয়া উচিত নয় initial?

— বেনিয়ামিন

টেক্সট-ইনডেন্ট ব্যবহারের কারণটি হ'ল মূল পাঠ্যটি যদি দীর্ঘ হয় তবে উপাদানটি পুরাতন পাঠ্যের মাপ অবধি থাকে না, নতুন পাঠ্যের আকারে সঙ্কোচিত হয় না (ধরে নেওয়া যায় যে আপনি যা চান)

— ক্রিস জ্যানসেন

পাঠ্য-ইনডেন্ট: -9999px; IE এ কাজ করে। যেখানে দৃশ্যমানতা: লুকানো; পদ্ধতি IE এ কাজ করে না।

— টম স্টের্মিটজ

Answer 4

মাইকম্যাকানার উত্তরের ভিত্তিতে , এটি আমার পক্ষে কাজ করেছে

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ সম্পূর্ণ অবস্থান

কোনও উপাদান যা একেবারে অবস্থিত থাকে সেগুলি প্রবাহের বাইরে নিয়ে যায় এবং এভাবে অন্যান্য উপাদান রাখার সময় কোনও স্থান নেয় না।

Comments

আমার জন্য এই উত্তরটি অন্যদের চেয়ে উচ্চতর ছিল কারণ এটি একই লাইনের মধ্যে একটি পাঠ্য প্রতিস্থাপনের সাথে কাজ করে, অর্থাৎ এটি পাঠ্যে একটি লাইন বিরতি জোর করে না (আমার এইচটিএমএল এবং সিএসএসের বিশেষ সংমিশ্রণের জন্য)।

— pgr

Answer 5

এটি সহজ, সংক্ষিপ্ত এবং কার্যকর। কোনও অতিরিক্ত এইচটিএমএল প্রয়োজন হয় না।

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

WooCommerce এর ব্রেডক্র্যাম্বসের জন্য হোম ছাড়া লিংকের পাঠ্য প্রতিস্থাপনের জন্য আমাকে এটি করতে হয়েছিল

সাস / কম

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

সিএসএস

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

Answer 6

আপনি পারবেন না, ভাল, আপনি পারেন।

.pvw-title:after {
  content: "Test";
}

এটি পরে সামগ্রী প্রবেশ করানো হবে উপাদানটির বর্তমান সামগ্রীর । এটি আসলে এটি প্রতিস্থাপন করে না, তবে আপনি খালি ডিভের জন্য চয়ন করতে পারেন এবং সমস্ত সামগ্রী যুক্ত করতে সিএসএস ব্যবহার করতে পারেন।

আপনি যখন কম বা কম পারেন, আপনার উচিত হবে না। আসল বিষয়বস্তু নথিতে রাখা উচিত। সামগ্রীর বৈশিষ্ট্যটি মূলত ছোট মার্কআপের জন্য, যেমন পাঠ্যের চারপাশে উদ্ধৃতি চিহ্নগুলি যা উদ্ধৃত হওয়া উচিত।

Comments

আমি খুব নিশ্চিত যে আমি সেই পদ্ধতিটির সাথে পাঠ্য প্রতিস্থাপনের জন্য একটি কোড ব্যবহার করেছি .. '<div class = "pvw-title"> ঘটনা </ div> <div class = "pvw-title"> তথ্য </ div> 'আমি ব্যবহার করতে পারি না: এর পরে, একই নামের সাথে আমি একাধিক

— ডিভ

ব্রাউজারগুলির জন্য এটি কতটা সুসংগত? এবং আমি সন্দেহ করি জাভাস্ক্রিপ্ট এই ধরণের নমনীয়তার জন্য আরও ভাল পছন্দ দীর্ঘমেয়াদী হতে চলেছে।

— স্যার

আধুনিক ব্রাউজারগুলি এটি সমর্থন করে। আমি পুরানো আই ভার্সন সম্পর্কে নিশ্চিত নই, তবে আমার ধারণা এটি quirksmode.com এ সন্ধান করা যেতে পারে। -ডিডিট- এটি করতে পারে: quirksmode.org/css/user-interface/content.html

— GolezTrol

Answer 7

ব্যবহার করার চেষ্টা করুন :beforeএবং :after। এইচটিএমএল রেন্ডার হওয়ার পরে একটি পাঠ্য সন্নিবেশ করানো হয় এবং এইচটিএমএল রেন্ডার করার আগে অন্যটি সন্নিবেশ করে। আপনি যদি পাঠ্যটি প্রতিস্থাপন করতে চান তবে বোতামের সামগ্রী খালি রাখুন।

এই উদাহরণটি স্ক্রিনের প্রস্থের আকার অনুযায়ী বোতামের পাঠ্য নির্ধারণ করে।

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

বোতাম পাঠ্য:

1. সঙ্গে :before

   বড় স্ক্রিনএক্সএক্সএক্স

   বড় পর্দা

2. সঙ্গে :after

   xxxbig পর্দা

   বড় পর্দা

Answer 8

আপনি শুধু বিভিন্ন গ্রন্থে বা ছবি দেখাতে চান, তাহলে রাখা ট্যাগ খালি এবং একাধিক ডাটা বৈশিষ্ট্যাবলী আপনার সামগ্রী লিখতে যে ভালো <span data-text1="Hello" data-text2="Bye"></span>। সেগুলির মধ্যে একটি ছদ্ম শ্রেণীর সাথে প্রদর্শন করুন:before {content: attr(data-text1)}

তাদের মধ্যে স্যুইচ করার জন্য এখন আপনার কাছে বিভিন্ন গোছা রয়েছে। আমার নেভিগেশনের নামগুলি আইকনগুলিতে পরিবর্তন করতে আমি তাদের প্রতিক্রিয়াশীল ডিজাইনের পদ্ধতির জন্য মিডিয়া প্রশ্নের সাথে একত্রে ব্যবহার করেছি।

jsfiddle বিক্ষোভ এবং উদাহরণ

_{এটি পুরোপুরি প্রশ্নের উত্তর নাও দিতে পারে তবে এটি আমার চাহিদা এবং অন্যদেরও সন্তুষ্ট করে।}

Answer 9

আমার font-size: 0বাহ্যিক উপাদানগুলির স্থাপনার এবং আমার প্রয়োজন font-sizeঅনুসারে :afterনির্বাচকের ভাগ্য ভাল ছিল।

Comments

এটি ভাল কাজ করে। এখানে একটি ডেমো রয়েছে ।

— আর্থার

Answer 10

এটি আমার জন্য ইনলাইন পাঠ্য সহ কাজ করেছে। এটি ফায়ারফক্স, সাফারি, ক্রোম এবং অপেরাতে পরীক্ষা করা হয়েছিল।

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}

Comments

না 11 মাধ্যমে অন্তত ইন্টারনেট 9 আমার জন্য কাজ এটি উপেক্ষা কারণে নেই "দৃশ্যমানতা: দৃশ্যমান" এ: পর উপাদান: stackoverflow.com/questions/17530947/...

— thenickdude

Answer 11

আমি এই কৌশলটি ব্যবহার করি:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

আমি এমনকি এটি কেবল একটি বেস ক্লাস পরিবর্তন করে পৃষ্ঠাগুলির আন্তর্জাতিকীকরণ হ্যান্ডেল করতে ব্যবহার করেছি ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Comments

এটি স্ক্রিন পাঠকদের ব্যবহারকারীদের জন্য সমস্যাযুক্ত। আপনি যদি উপাদানটির অযোগ্য / দৃশ্যমানতা পরিবর্তন না করেন এবং কোনও আরিয়া ইঙ্গিত সরবরাহ না করেন তবে আপনার "অদৃশ্য" পাঠ্যটি এখনও পর্দা পাঠক দ্বারা পড়তে পারে।

— স্বচ্ছ সংকলক

Answer 12

সিউডো-উপাদান এবং CSS দৃশ্যমানতার সাথে পাঠ্য প্রতিস্থাপন

এইচটিএমএল

<p class="replaced">Original Text</p>

সিএসএস

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

Answer 13

ছদ্ম উপাদান ব্যবহার করে, এই পদ্ধতিটির জন্য মূল উপাদানটির জ্ঞান প্রয়োজন হয় না এবং কোনও অতিরিক্ত মার্কআপের প্রয়োজন হয় না।

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 14

এটি একটি বোতাম হিসাবে একটি চেকবক্স প্রয়োগ করে যা হ্যাঁ বা না এর 'পরীক্ষিত' অবস্থার উপর নির্ভর করে দেখায়। সুতরাং এটি কোনও কোড না লিখে সিএসএস ব্যবহার করে পাঠ্য প্রতিস্থাপনের একটি উপায় প্রদর্শন করে।

এটি এখনও কোনও পোষ্ট মান প্রত্যাবর্তন (বা প্রত্যাবর্তন না করা) হিসাবে চেকবাক্সের মতো আচরণ করবে তবে প্রদর্শনের দিক থেকে এটি টগল বোতামের মতো দেখাচ্ছে।

রঙগুলি আপনার পছন্দ মতো নাও হতে পারে, কেবলমাত্র একটি বিন্দুর চিত্রিত করার জন্য সেগুলি সেখানে রয়েছে।

এইচটিএমএলটি হ'ল:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... এবং সিএসএস হ'ল:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

আমি এটি কেবল ফায়ারফক্সে চেষ্টা করেছি, তবে এটি স্ট্যান্ডার্ড সিএসএস তাই অন্য কোথাও কাজ করা উচিত।

Answer 15

অন্য প্রতিটি উত্তরে আমি যা দেখতে পাই তার বিপরীতে, আপনাকে কোনও ট্যাগ দিয়ে কোনও লিখিত সামগ্রী প্রতিস্থাপন করার জন্য সিউডো উপাদান ব্যবহার করার দরকার নেই

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

Comments

সিএসএস 2 হিসাবে contentকেবল :beforeএবং এর জন্য প্রযোজ্য :after। সিএসএস 3 সবকিছু এটা প্রসারিত কিন্তু জেনারেট করা বিষয়বস্তু মডিউল, এখনো খসড়া অবস্থায় থাকা তাই কোনো ব্যবহার অত্যন্ত সম্ভবত ব্রাউজার-নির্ভর হতে হবে।

— মেরেক

একটি কি "balise" ? না " 1. (ইউরোপীয় ট্রেন কন্ট্রোল সিস্টেম) একটি বৈদ্যুতিন বাতিঘর বা ট্রান্সপন্ডার একটি railw এর পাগল উভয় দলের মাঝখানে খাড়া " , আমি অনুমান করে। (দয়া করে এখানে আপনার মন্তব্যে নয়, আপনার প্রশ্ন সম্পাদনা করে প্রতিক্রিয়া জানান )

— পিটার মর্টেনসেন

Answer 16

কৌশল ছাড়া এটি সত্যই সম্ভব নয়। এখানে এমন একটি উপায় যা পাঠ্যের একটি চিত্রের সাহায্যে পাঠ্যকে প্রতিস্থাপন করে কাজ করে।

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

এই ধরণের জিনিসটি সাধারণত জাভাস্ক্রিপ্ট দ্বারা সম্পন্ন হয়। এটি এখানে jQuery এর মাধ্যমে কীভাবে করা যেতে পারে:

$('.pvw-title').text('new text');

Comments

আমি জাভাস্ক্রিপ্ট ব্যবহার করতে পারি না: /

— মকিটা

এটি কেবলমাত্র আমি মনে করি এটি কাজ করতে পারে: .pvw- শিরোনাম স্প্যান [শৈলী * = "রঙ: # 000, ফন্ট-আকার: 14px;"] ibility দৃশ্যমানতা: লুকানো; p .pvw- শিরোনাম স্প্যান [শৈলী * = "রঙ: # 000; ফন্ট-আকার: 14px;"]: পরে {দৃশ্যমানতা: দৃশ্যমান; রঙ: # 000; ফন্ট-আকার: 14px; সামগ্রী: "পরীক্ষা"; } তবে, যেহেতু তারা উভয়ই একই স্টাইল ব্যবহার করছে, তাই আমি এটি করতে পারি না ..: /

— মকিটা

কেন আপনি রঙ / ফন্টের উপর ভিত্তি করে এটি নির্বাচন করবেন?

— নাথান মনসোস

আমি আপনাকে এটি পুরো শৈলীর ভিত্তিতে নির্বাচন করতে চাই, তাই আমি সেই নির্দিষ্ট শিরোনামটি সম্পাদনা করতে পারি এবং উভয়ই নয়, যেহেতু উভয়েরই একই "ডিভ" নাম রয়েছে।

— মকিটা

Answer 17

আমার একটি সমস্যা ছিল যেখানে আমাকে লিঙ্কের পাঠ্যটি প্রতিস্থাপন করতে হয়েছে, তবে আমি জাভাস্ক্রিপ্ট ব্যবহার করতে পারিনি এবং এক্সএমএল থেকে সংকলিত হওয়ায় আমি সরাসরি একটি হাইপারলিঙ্কের পাঠ্যও পরিবর্তন করতে পারি না। এছাড়াও, আমি ছদ্ম উপাদান ব্যবহার করতে পারি না, বা তাদের চেষ্টা করার পরে তারা কাজ করে বলে মনে হয় না।

মূলত, আমি যে পাঠ্যটি চেয়েছিলাম তা একটি স্প্যানের মধ্যে রেখেছি এবং এর নীচে অ্যাঙ্কর ট্যাগ রেখেছি এবং উভয়কে একটি ডিভের মধ্যে আবদ্ধ করি। আমি মূলত সিএসএসের মাধ্যমে অ্যাঙ্কর ট্যাগ আপ সরানো এবং তারপরে ফন্টটি স্বচ্ছ করে তুলেছি। এখন যখন আপনি স্প্যানের উপরে ঘুরে দেখেন, এটি একটি লিঙ্কের মতো "কাজ করে"। এটি করার একটি সত্যই হ্যাকি উপায়, তবে এভাবেই আপনি বিভিন্ন পাঠ্যের সাথে একটি লিঙ্ক রাখতে পারেন ...

আমি কীভাবে এই সমস্যাটি পেয়েছিলাম তার এক ঝলক

আমার এইচটিএমএল

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

আমার সিএসএস

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

সিএসএসকে আপনার প্রয়োজনীয়তার উপর ভিত্তি করে পরিবর্তন করতে হবে তবে আপনি যা যা বলছেন তা করার এটি সাধারণ উপায়।

Comments

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

— ওপিতে

Answer 18

আমি এর মতো একটি সমাধান পেয়েছি যেখানে একটি শব্দ "গা "়" ছোট পর্দার প্রস্থে ছোট করে "ডি" করা হবে। মূলত আপনি কেবল আসল সামগ্রী 0 এর ফন্ট আকার তৈরি করেন এবং সিউডো উপাদান হিসাবে সংক্ষিপ্ত রূপটি পান।

এই উদাহরণে পরিবর্তনের পরিবর্তে হোভারে ঘটে:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}

<span>Dark</span>

Answer 19

আট বছর পরে, স্টাইলিশ ব্রাউজার এক্সটেনশানটি কোনও ওয়েবসাইটে (আমার নয়) কিছু পরিবর্তন করার জন্য ব্যবহার করার চেষ্টা করার সময় আমি একই চ্যালেঞ্জের মুখোমুখি হয়েছিলাম । এবং এবার "ইন্সপেক্ট এলিমেন্ট" ব্যবহার করে উত্স কোডটি দেখে এটি কাজ করেছিলাম এবং তার ভিত্তিতে সিএসএস কোড তৈরি করেছি।

এটি আগের মতো দেখতে এটি ছিল:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

এটি শৈলীর সংশোধন করতে আমি এইচটিএমএল এবং সিএসএসের একই অংশ:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

আপনি উপরের কোডটি চালাতে পারেন এবং আপনি দেখতে পাবেন যে এটি কাজ করে (ক্রোমে পরীক্ষিত)।

---

_{আমি যখন এই প্রশ্নটি জিজ্ঞাসা করেছি তখন কেবল এটিই আমি ফিরে চেয়েছিলাম।}

_{আমি কোনও ধরণের কমিউনিটি ব্লগ / মাইস্পেস ব্যবহার করছিলাম অনুরূপ স্টাফ এবং আপনার প্রোফাইল স্টাইল করার সময় কেবলমাত্র আপনার জিনিসটি ছিল তাদের সিএসএস সম্পাদক, এবং সে কারণেই আমি স্টাইলের উপর ভিত্তি করে এটি নির্বাচন করতে চেয়েছিলাম।}

আমি উত্তর এখানে পেয়েছি:

• উন্নত সিএসএস নির্বাচনকারী - স্টাইলিংয়ের ভিত্তিতে নির্বাচন করুন

• সিএনএস নির্বাচক ইনলাইন শৈলী বৈশিষ্ট্য দ্বারা

Answer 20

এই কাজটি করার উপায়টি হ'ল CSS সামগ্রীতে লাইন-উচ্চতা যুক্ত করা। এটি ব্লকটি গোপনের উপরে দেখতে পাবে, সুতরাং এটি পরিবর্তিত পাঠ্যটি গোপন করবে না।

আগে ব্যবহারের উদাহরণ :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

Answer 21

ঠিক আছে, অনেকে বলেছে এটি হ্যাক। যাইহোক, আমি আরও আপডেট আপ হ্যাক যুক্ত করতে চাই, যা এর সুবিধা নেয় flexboxএবং rem, যেমন

• আপনি এই পাঠ্যটি পরিবর্তিত হতে ম্যানুয়ালি অবস্থান করতে চান না, এজন্য আপনি কোনও সুবিধা নিতে চান flexbox
• আপনি স্পষ্টভাবে ব্যবহার করে paddingএবং / অথবা marginপাঠ্যটি ব্যবহার করতে চান না px, যা বিভিন্ন ডিভাইস এবং ব্রাউজারগুলিতে বিভিন্ন স্ক্রিন আকারের জন্য বিভিন্ন আউটপুট দিতে পারে

সমাধানটি এখানে সংক্ষেপে flexboxএটি নিশ্চিত করে যে এটি স্বয়ংক্রিয়ভাবে নিখুঁতভাবে অবস্থান করছে এবং remপিক্সেলের জন্য আরও মানক (এবং স্বয়ংক্রিয়) বিকল্প রয়েছে।

নীচে কোড সহ কোডস্যান্ডবক্স এবং স্ক্রিনশটের আকারে আউটপুট, দয়া করে noteনীচের কোডটি পড়ুন!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

দ্রষ্টব্য: বিভিন্ন ট্যাগগুলির জন্য আপনার বিভিন্ন মানের প্রয়োজন হতে পারে rem, এটি h1কেবলমাত্র বড় পর্দার জন্য ন্যায়সঙ্গত হয়েছে । তবে আপনার সাথে @mediaএটি সহজেই মোবাইল ডিভাইসে প্রসারিত করতে পারে।