সিএসএসের ধর্মঘট পাঠ্য থেকে আলাদা?

268

এইচটিএমএল উপাদানগুলি del, strikeবা sসমস্তই কোনও পাঠ্য ধর্মঘট-মাধ্যমে প্রভাবের জন্য ব্যবহৃত হতে পারে। উদাহরণ:

<del>del</del>

.... দেয়: দেল

<strike>strike</strike> and <s>strike</s>

.... দেয়: ধর্মঘট ও ধর্মঘট

text-decorationএকটি মান সহ সিএসএস সম্পত্তি line-throughএকইভাবে ব্যবহার করা যেতে পারে। কোড...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

... দেখতে দেখতেও রেন্ডার হবে: পাঠ্য-সজ্জা: লাইন-মাধ্যমে

তবে স্ট্রাইকথ্রু লাইনটি সাধারণত পাঠ্যের সমান রঙ।

লাইনটিকে আলাদা রঙ করতে সিএসএস ব্যবহার করা যেতে পারে?

html  css 
— gojomo
সূত্র
প্রভাবের মাধ্যমে স্বচ্ছ ধর্মঘটের জন্য, আপনি পাঠ্যের উপর
— ওয়েব-টিকি

উত্তর:

408

হ্যাঁ, একটি অতিরিক্ত মোড়কের উপাদান যুক্ত করে। একটি বাহ্যিক উপাদানকে কাঙ্ক্ষিত লাইন-থ্রু রঙ নির্ধারণ করুন, তারপরে অভ্যন্তরীণ উপাদানে পছন্দসই পাঠ্য রঙটি দিন। উদাহরণ স্বরূপ:

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>
স্নিপেট প্রসারিত করুন

... অথবা ...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>
স্নিপেট প্রসারিত করুন

(দ্রষ্টব্য, তবে এটি এইচটিএমএল 4 এ অবহেলিত এবং এইচটিএমএল 5 এ অপ্রচলিত<strike> হিসাবে বিবেচিত হয়েছে ( এছাড়াও ডাব্লু 3.org দেখুন )। প্রস্তাবিত পদ্ধতিটি হ'ল <del>মুছে ফেলার সত্যিকার অর্থটি ব্যবহার করা হয় অথবা অন্যথায় সিএসএসের <s>সাথে কোনও উপাদান বা স্টাইল ব্যবহার text-decorationকরা হয় এখানে প্রথম উদাহরণ।)

স্ট্রাইকথ্রুটি একটি: হোভারের জন্য উপস্থিত হওয়ার জন্য একটি স্পষ্ট স্টাইলশিট (ঘোষিত বা রেফারেন্স করা <HEAD>) অবশ্যই ব্যবহার করা উচিত। ( :hoverসিউডো-ক্লাসটি ইনলাইন স্টাইল বৈশিষ্ট্যের সাথে প্রয়োগ করা যায় না)) উদাহরণস্বরূপ:

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>
স্নিপেট প্রসারিত করুন
(আই 7 এর কিছু কার্যকর হওয়ার আগে কিছু hrefসেট করা দরকার বলে মনে হচ্ছে ; এফএফ এবং ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি নেই))<a>:hover

— gojomo
সূত্র
8
আমার "এতটা অসম্ভব!" উত্তর.
— জন কুগেলম্যান
1
Jquery বাস্তবায়ন খুব দরকারী হবে।
— ইয়াকুনিনস
38
@ ইউটিপ আপনি এই জন্য jQuery কেন ব্যবহার করবেন?
— কাপা
4
মোড়ানো উপাদান গুলো চুষতে থাকে। বেশিরভাগ ক্ষেত্রে আপনি সাধারণ সিডোলেমেন্ট দিয়ে প্রায় একই প্রভাব অর্জন করতে পারেন, del { position:relative }এবং তারপরে del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }।
— দেহধারী
2
শুধু একটি মোড়ক প্রতিভাশালী। ওহে আমার godশ্বর, আমি যে সমস্ত সিউডো-এলিমেন্টস নিয়ে এসেছি তার থেকে এটি ভাল। দারূন কাজ!
— কুনিংফ্যাটালিস্ট
69

ফেব্রুয়ারী ২০১ 2016 , সিএসএস 3 এর নীচে উল্লিখিত সমর্থন রয়েছে। এখানে মূল্য ছাড়ের সাথে একটি WooCommerce এর একক পণ্য পৃষ্ঠা থেকে একটি স্নিপেট রয়েছে

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

এর ফলাফল: পাঠ্য সজ্জা উদাহরণ

সিএসএস 3 সম্ভবত ব্যবহার সরাসরি সমর্থন থাকবে text-decoration-colorসম্পত্তি । নির্দিষ্টভাবে:

text-decoration-colorসিএসএস সম্পত্তি যখন underlines, overlines অঙ্কন, অথবা দ্বারা স্ট্রাইক-throughs নিদিষ্ট ব্যবহৃত রঙ সেট করে text-decoration-line। অন্যান্য এইচটিএমএল উপাদানগুলির সংমিশ্রণ না করে এই পাঠ্য সজ্জাটিকে রঙ করার জন্য এটি পছন্দসই উপায়।

আরো দেখুন text-decoration-colorসিএসএস 3 খসড়া বৈশিষ্ট ।

আপনি যদি এই পদ্ধতিটি তাত্ক্ষণিকভাবে ব্যবহার করতে চান তবে আপনাকে সম্ভবত এটি ব্যবহার করে উপসর্গ করতে হবে -moz-text-decoration-color। (এছাড়াও এটি -moz-ফরওয়ার্ড-সামঞ্জস্যের জন্য ছাড়াই নির্দিষ্ট করুন ))

— যান্ত্রিক শামুক
সূত্র
2
"সিএসএস 3 সম্ভবত থাকতে পারে" বরং ... আশাবাদী।
— বোল্টক্লক
5
@ বলটকলক: কীভাবে আশাবাদী? এটি ইতিমধ্যে ডাব্লু 3 সি ওয়ার্কিং ড্রাফ্টে রয়েছে, যা সক্রিয়ভাবে অনুসরণ করা হচ্ছে।
— যান্ত্রিক শামুক
2
ক্যানিউজ অনুসারে , কোনও ব্রাউজার বর্তমানে (2014 সালে) text-decoration-colorউপসর্গ ছাড়াই সমর্থন করছে না।
— ব্লেজমোনজার
4
এবং 3 বছর পরে ... ফায়ারফক্স এবং সাফারিতে এটির 20% উপস্থিতি রয়েছে।
— আন্দ্রে ওয়ার্ল্যাং
1
ক্যানিউজ অনুসারে, বর্তমানে কেবল ফায়ারফক্স সমর্থন করেছে
— ইয়াকোভএল
35

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

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}
<p>Here comes some <strike>strike-through</strike> text!</p>
স্নিপেট প্রসারিত করুন

— Blazemonger
সূত্র
@ ভিভ এইচটিএমএল স্ট্রাইকথ্রু উপাদান - অ-শব্দার্থক সংস্করণ
— ব্লেজমোনজার
1
ধন্যবাদ, আমি
— এটির
একটি ব্যবহার করে: পদ্ধতির পরে অ্যাক্সেসযোগ্যতার সমস্যা হতে পারে
— ewanm89
9

আপনি যদি ইন্টারনেট এক্সপ্লোরার প্রান্ত সম্পর্কে চিন্তা না করেন তবে স্ট্রাইক-থ্রোয়ের জন্য বিভিন্ন রঙ অর্জনের সহজ উপায় হ'ল সিএসএস সম্পত্তি ব্যবহার করা: পাঠ্য- সজ্জাটির সাথে একত্রে পাঠ্য-সজ্জা-রঙ : লাইন-মাধ্যমে;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

- এজ \ ইন্টারনেট এক্সপ্লোরার দিয়ে কাজ করে না

— রোহিন তাক
সূত্র
7

এই সিএসএস 3 আপনাকে আরও সম্পত্তি এবং আরও ভাল কাজ করার মাধ্যমে লাইন তৈরি করবে। 

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
— বিষ্ণু এসআর
সূত্র
6

@Gojomo এ যোগ করা আপনি :afterঅতিরিক্ত উপাদানটির জন্য সিউডো উপাদান ব্যবহার করতে পারেন । কেবলমাত্র সতর্কতাই হ'ল সিএসএসের সীমাবদ্ধ ক্রিয়াকলাপ হ'ল আপনাকে innerTextএকটি data-textঅ্যাট্রিবিউটে আপনার সংজ্ঞা দিতে contentহবে।

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}
<s data-text="Strikethrough">Strikethrough</s>
স্নিপেট প্রসারিত করুন

— ibolmo
সূত্র
5

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

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

ভাজা দেখুন: http://jsfiddle.net/YSvaY/

গ্রেডিয়েন্ট কালার-স্টপস এবং পটভূমির আকার লাইন-উচ্চতার উপর নির্ভর করে। (আমি পরে গণনার জন্য কম ব্যবহার করেছি এবং এরপরে অটোপ্রিফিক্সার ...)

— simbo
সূত্র
3

আমার অভিজ্ঞতা

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

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

এটি কম মার্কআপও তৈরি করে এবং একই পরিমাণে স্টাইলিং তৈরি করে যা আমার মতে একটি দুর্দান্ত ব্যাপার।

সুতরাং অন্য কেউ যদি আশা করে থাকে যে এ জাতীয় সমস্যাগুলি এটিকে সাহায্য করে:

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

স্পষ্টতই আপনি রূপান্তর ব্যবহার করতে পারেন: মার্জিনের পরিবর্তে অনুবাদ করুন, তবে এই উদাহরণটি আইই 8-এ ফিরে কাজ করা

— ব্র্যাডি এডগার
সূত্র
2

ব্লেজমোনজারের উত্তরের (উপরে বা নীচে) ভোটদানের প্রয়োজন - তবে আমার পর্যাপ্ত পয়েন্ট নেই।

"উপলব্ধ না" ইঙ্গিত করতে আমি 20px প্রশস্ত সিএসএস রাউন্ড বোতাম জুড়ে একটি ধূসর বার যুক্ত করতে চেয়েছিলাম এবং ব্লাজমোনজারের সিএসএস টুইট করেছি:

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}
— anoldermark
সূত্র
0

প্যারেন্ট উপাদানকে কাঙ্ক্ষিত লাইন-থ্রো রঙ নির্ধারণ করা মুছে ফেলা পাঠ্য উপাদানগুলির <del>জন্যও কাজ করে - ধারণাটি ক্লায়েন্টটি রেন্ডার করে তোলে<del> লাইন- হিসাবে ।

http://jsfiddle.net/kpowz/vn9RC/

— kpowz
সূত্র
-4

এখানে একটি নমুনা jQuery বাস্তবায়ন - gojomo এর উত্তর এবং utype এর পরামর্শ (উভয়ের জন্য +1) ধন্যবাদ

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

সিএসএস হতে পারে

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }
— Aximili
সূত্র
কোন অংশটি অবৈধ? এটি সমস্ত বড় ব্রাউজারগুলিতে যদিও কাজ করেছে
— এক্সিমিলি
3
"ওয়ার্কস" এবং "বৈধ" একে অপরের থেকে অনেক দূরে। ব্রাউজারগুলি এমন কি এইচটিএমএলকে ব্যাখ্যা করার চেষ্টা করে যার এতে বেশ কয়েকটি ত্রুটি রয়েছে। দেখুন W3C এর মার্কআপ ভ্যালিডেশন পরিষেবা , কেন বৈধ এইচটিএমএল প্রত্যেকের কাছে গুরুত্বপূর্ণ? , এইচটিএমএল বৈধ ডিআইভি বৈশিষ্ট্য? এসও
— কাপা
যদি আমি ভুল না করি তবে অ্যাট্রিবিউটের নামটি "ডেটা-স্পেশাল" এ পরিবর্তন করা এটিকে বৈধ HTML5 করা উচিত 5
— মুহাদ
13
রঙিন স্ট্রাইক-থ্রো-র মাধ্যমে কোনও জাফর যুক্ত করতে jQuery? আমরা কী হয়ে গেলাম ?!
— ক্রিস বেকার
3
কোনও সম্ভাব্য এক্সএসএস সমস্যার মতো মনে হচ্ছে: আপনার কাছে সরল পাঠ্য রয়েছে originalPrice, তারপরে এটি HTML হিসাবে আবার ইনজেক্ট করুন। এর .html()পরিবর্তে ব্যবহার করার চেষ্টা করুন .text()। অথবা সম্ভবত jQuery এর ব্যবহার করুন wrap()।
— tuomassalo
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.