আপনি কি সিএসএস দিয়ে <br /> টার্গেট করতে পারেন?

Question

<br/>সিএসএসের সাহায্যে লাইন-ব্রেক ট্যাগটিকে লক্ষ্য করা কি সম্ভব ?

আমি প্রতিবার একটি লাইন-ব্রেক যখনই 1px ড্যাশড লাইন রাখতে চাই। আমি নিজের সিএসএস দিয়ে কোনও সাইট কাস্টমাইজ করছি এবং সেট এইচটিএমএল পরিবর্তন করতে পারছি না, অন্যথায় আমি অন্য কোনও উপায়ে ব্যবহার করব।

আমি এটি সম্ভব বলে মনে করি না তবে সম্ভবত এমন কোনও উপায় আছে যার সম্পর্কে কেউ জানে।

Comments

স্ট্যাকওভারফ্লো.com

— পিটার ক্রাউস

Answer 1

BRএকটি লাইন-ব্রেক উত্পন্ন করে এবং এটি কেবল একটি লাইন ব্রেক হয়। যেহেতু এই উপাদানটির কোনও বিষয়বস্তু নেই, কেবলমাত্র কয়েকটি স্টাইল রয়েছে যা এটি প্রয়োগ করতে ইচ্ছুক করে, যেমন clearবা পছন্দ করে position। আপনি BRএর সীমানা সেট করতে পারেন তবে এর কোনও ভিজ্যুয়াল মাত্রা না থাকায় আপনি এটি দেখতে পাবেন না।

যদি আপনি দৃষ্টিভঙ্গিভাবে দুটি বাক্য পৃথক করতে চান তবে আপনি সম্ভবত অনুভূমিক শাসকটি ব্যবহার করতে চান যা এই লক্ষ্যটির উদ্দেশ্যে। যেহেতু আপনি মার্কআপটি পরিবর্তন করতে পারবেন না, তাই আমি কেবল CSS ব্যবহার করে ভয় করি যে আপনি এটি অর্জন করতে পারবেন না।

দেখে মনে হচ্ছে, এটি অন্যান্য ফোরামে ইতিমধ্যে আলোচনা হয়েছে। পুনঃ থেকে নিষ্কাশন করুন : সিএসএস ব্যবহার করে বিআর উপাদানটির উচ্চতা নির্ধারণ :

[টি] তাঁর পক্ষে বিআরটির জন্য কিছুটা বিশৃঙ্খলাবদ্ধ অবস্থার দিকে পরিচালিত করে যে একদিকে এটি সাধারণ উপাদান হিসাবে বিবেচনা করা হচ্ছে না, পরিবর্তে উত্পন্ন সামগ্রীতে \ এ এর ​​উদাহরণ হিসাবে দেখা হচ্ছে, তবে অন্যদিকে এটি হিসাবে বিবেচিত হচ্ছে সিএসএস বৈশিষ্ট্যগুলির (একটি সীমিত উপসেট) এর একটি সাধারণ উপাদানকে এতে অনুমতি দেওয়া হচ্ছে।

আমি সিএসএস 1 স্পেসিফিকেশনে একটি স্পষ্টতাও পেয়েছি (উচ্চ স্তরের কোনও অনুমান এটি উল্লেখ করে না):

বর্তমান CSS1 এর বৈশিষ্ট্য এবং মানগুলি 'বিআর' উপাদানটির আচরণ বর্ণনা করতে পারে না। এইচটিএমএলে, 'বিআর' উপাদানটি শব্দের মধ্যে একটি লাইন বিরতি নির্দিষ্ট করে। কার্যত, উপাদানটি একটি লাইন বিরতি দ্বারা প্রতিস্থাপিত হয়। সিএসএসের ভবিষ্যতের সংস্করণগুলি যুক্ত এবং প্রতিস্থাপিত সামগ্রী হ্যান্ডেল করতে পারে তবে CSS1- ভিত্তিক ফর্ম্যাটরগুলি অবশ্যই 'বিআর' বিশেষভাবে চিকিত্সা করবে।

গ্রান্ট ওয়াগনারের পরীক্ষাগুলি দেখায় যে স্টাইল করার কোনও উপায় নেই BRকারণ আপনি অন্যান্য উপাদানগুলির সাথে করতে পারেন। অনলাইনে একটি সাইট রয়েছে যেখানে আপনি নিজের ব্রাউজারে ফলাফল পরীক্ষা করতে পারেন ।

হালনাগাদ

পেলস আরও কিছু তদন্ত করেছে এবং চিহ্নিত করেছে যে আইই 8 (উইন 7 এ) এবং ক্রোম 2 / সাফারি 4 বি আপনাকে BRকিছুটা স্টাইল করতে দেয় । এবং প্রকৃতপক্ষে, আমি আইই নেট রেন্ডারারের আই 88 ইঞ্জিনের সাথে আইই ডেমো পৃষ্ঠাটি যাচাই করেছিলাম এবং এটি কার্যকর হয়েছে।

2 আপডেট করুন c69 কিছু আরও তদন্ত, এবং এটি সক্রিয় আউট আপনি করতে পারেন শৈলী মার্কার জন্য brবেশ প্রচন্ডভাবে (যদিও না ক্রস ব্রাউজার), এখনো এই প্রভাবিত করবে না নিজেই লাইন ভঙ্গ করে, কারণ মূল ধারক অন্তর্গত বলে মনে হচ্ছে।

Comments

দুর্দান্ত উত্তর। যদি এটি ক্রস ব্রাউজার না হয় তবে আপনি যদি একাই ব্রাউজারটিকে লক্ষ্য না করে (তবে কেবল মোবাইল ডিভাইস কেবল, সম্ভবত) এটি স্টাইল করার চেষ্টা করার মতো নয়। অন্যথায়, স্টাইলিং (<p> ট্যাগগুলি, কারও?) অনুমতি দেওয়ার জন্য আপনার এইচটিএমএলকে সংশোধন করার

— অর্থটি বোধ করা হচ্ছে

Answer 2

নিম্নলিখিতগুলি ব্যবহার করে দেখুন, আমি উচ্চতর ভোটের সাথে অন্য উত্তর থেকে আপডেট 2 ব্যবহার করে একসাথে রেখেছি এবং এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Comments

এজ এবং আইই তে কাজ করছে বলে মনে হচ্ছে না, তবে এগুলি প্রকৃত ব্রাউজার নয়।

— জেসেটার

Answer 3

একটি <br>ট্যাগ স্টাইল করা প্রয়োজন একটি ভাল কারণ আছে ।

যখন এটি কোডের অংশ হয় আপনি পরিবর্তন করতে চান না (বা করতে পারবেন না) এবং আপনি চান যে এই বিশেষটি <br>প্রদর্শিত হবে না।

.xxx br {display:none}

আপনার সময় এবং কখনও কখনও অনেক সময় সাশ্রয় করতে পারে।

Answer 4

ভবিষ্যতের যে কোনও দর্শনার্থীর সুবিধার জন্য যারা আমার মন্তব্যগুলি মিস করেছেন:

br {
    border-bottom:1px dashed black;
}

কাজ করে না.

এটি IE 6, 7 এবং 8, ফায়ারফক্স 2, 3 এবং 3.5B4, উইন্ডোজের জন্য সাফারি 3 এবং 4, অপেরা 9.6 এবং 10 (আলফা) এবং গুগল ক্রোমে (সংস্করণ 2) পরীক্ষা করা হয়েছে এবং এটি কোনওর মধ্যেই কার্যকর হয়নি তাদের। যদি ভবিষ্যতে কোনও মুহুর্তে কেউ এমন একটি ব্রাউজার খুঁজে পায় যা কোনও <br>উপাদানের সীমানাকে সমর্থন করে তবে দয়া করে এই তালিকাটি আপডেট করতে দ্বিধা বোধ করবেন।

আরও মনে রাখবেন যে আমি আরও কয়েকটি বিষয় চেষ্টা করেছিলাম:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

এর মধ্যে নিম্নলিখিতগুলি অপেরা 9.6 এবং 10 (আলফা) তে কাজ করে (ধন্যবাদ কর্নেল!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

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

Comments

: পূর্বে সামগ্রী ছাড়া অস্তিত্ব নেই। যোগ content:""; display:blockদ্বিতীয় নিয়মের।

— কর্নেল

Answer 5

আমি জানি আপনি এইচটিএমএল সম্পাদনা করতে পারবেন না, তবে আপনি যদি সিএসএস সংশোধন করতে পারেন তবে আপনি জাভাস্ক্রিপ্ট যুক্ত করতে পারবেন?

যদি তাই হয়, আপনি jquery অন্তর্ভুক্ত করতে পারেন, তাহলে আপনি করতে পারেন

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

Comments

আপনি $ ('br') বলতে চান before (এর আগে << span class = "myclass"> </span> ');

— মোলোকোকোকো

Answer 6

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

আইই 8-তে নীচে হিসাবে রেন্ডার করে ... যদিও কেবল একটি ব্রাউজারে প্রচুর ব্যবহার হয় না।

(এনবি আমি IE 8.0.7100 ব্যবহার করছি (উইন 7 আরসি তে) যদি এতে কোনও পার্থক্য আসে)

এছাড়াও,

br:after { content: "..." }  
br { content: "" }`

বা,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

ক্রোম 2 / সাফারি 4 বিতে একটি ড্যাশযুক্ত লাইন দেয় তবে লাইন ব্রেকটি হারাবে (যদি না কেউ আবার পুনঃপ্রবর্তনের উপায় নিয়ে আসতে পারে) এটি অকেজো থেকে কম করে তোলে makes

যেমন
IE8 পরীক্ষা , ক্রোম / সাফারি পরীক্ষা এবং অন্য একটি

Comments

ইহা আকর্ষণীয়. আইই 8 এর অধীনে আমি এটি পুনরুত্পাদন করতে পারি না। আপনি কী এমন একটি উদাহরণ অনলাইনে রাখতে পারেন যা আপনার এম্বেড করা চিত্র হিসাবে আপনার আইই 8 এর মতো দেখাচ্ছে?

— viam0Zah

লিঙ্কগুলি যুক্ত করা হয়েছে - উইন 7 আই 8 এর কিছুটা আলাদা সংস্করণ ব্যবহার করে যাতে কোনও পার্থক্য হয়।

— পেলগুলি

@ প্লামস ধন্যবাদ, আমি আইইএনটিআরেন্ডারারের সাথে আইই পরীক্ষার পৃষ্ঠাটি যাচাই করেছি এবং এটি সত্যই এর নীচে সীমানাটি দেখায় BR। ধন্যবাদ, আমি আপনার পরীক্ষার ফলাফলের সাথে আমার উত্তর আপডেট করেছি।

— viam0Zah

Answer 7

আমার নিজের পরীক্ষাগুলি শেষ পর্যন্ত দেখায় যে brট্যাগগুলি CSS এর জন্য লক্ষ্যবস্তু করা পছন্দ করে না।

তবে আপনি যদি স্টাইল যুক্ত করতে পারেন তবে আপনি সম্ভবত পৃষ্ঠার শিরোনামে একটি স্ক্রিপ ট্যাগও যুক্ত করতে পারেন? বাহ্যিকের সাথে লিঙ্ক করুন .jsযা এরকম কিছু করে:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

সংক্ষেপে, এটি অনুকূল নয়, তবে এখানে আমার সমাধান is

Comments

'আমি দুর্ভাগ্যক্রমে এইচটিএমএল পরিবর্তন করতে পারি না' ডিসি 3 লিখেছেন।

— viam0Zah

@ তারেক: আমি পোস্ট করা উত্তরটি নিখুঁতভাবে ওপি-র পক্ষে নয়, তবে এই পৃষ্ঠার সন্ধানকারী প্রত্যেকের জন্য একই ধরণের প্রশ্ন রয়েছে।

— ক্রিস

Answer 8

এটি সমস্যার সমাধান বলে মনে হচ্ছে:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

Answer 9

বিআর একটি ইনলাইন উপাদান, কোনও ব্লক উপাদান নয়।

সুতরাং, আপনার প্রয়োজন:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

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

Comments

ইনলাইন উপাদান না সীমানা paddings এবং মার্জিন আছে - শুধুমাত্র অন্যান্য এইরকম আচরণ।

— viam0Zah

আমি এফএক্স-এর সাথে ফায়ারব্যাগের চেষ্টা করছি trying আমি এটিও চেষ্টা করেছিলাম কিন্তু এটি আমার পক্ষে কার্যকর হয়নি। আমি লক্ষ্য করেছি যে লাইন ব্রেক ব্রেকের স্ল্যাশ ভাসমান নয় (যদি এটি সঠিক পরিভাষা হয়), অর্থাৎ..আর আর / এর মধ্যে কোনও স্থান নেই। এটা কি একটা ফ্যাক্টর? আমি ভেবেছিলাম যে একটি জায়গা থাকতে হবে। এটিকে ঠিক করার জন্য আমি ফায়ারব্যাগে এইচটিএমএল যেভাবেই হোক সম্পাদনা করেছি এবং এখনও কিছুই নেই। যাইহোক সমস্ত সহায়তার জন্য ধন্যবাদ লোকেরা - এই সাইটটি আগে কখনও ব্যবহার করেনি এবং আমি খুব দ্রুত অবাক হয়েছি যে আমি কীভাবে প্রতিক্রিয়া পেয়েছি। আপনি এখানে এসেছেন দুর্দান্ত সম্প্রদায়।

— ডিসি 3

@রিচার্ড: আপনি কি আসলে এটি পরীক্ষা করেছেন, যদি তাই হয় তবে কোন ব্রাউজারটি? আমি এটি IE 6, 7 এবং 8, ফায়ারফক্স 2, 3 এবং 3.5B4, উইন্ডোজের জন্য সাফারি 3 এবং 4, অপেরা 9.6 এবং 10 (বিটা) এবং গুগল ক্রোমে (সংস্করণ 1) চেষ্টা করেছি এবং এটি কোনওটির মধ্যেই কার্যকর হয়নি ।

— অনুদান ওয়াগনার

Answer 10

আপডেট হয়েছে 9/13/2019:

<br>ট্যাগটিকে এভাবে স্টাইল করার উদ্দেশ্য হ'ল "বড়" লাইন ব্রেক করা (অর্থাত লাইনগুলির মধ্যে কিছুটা অতিরিক্ত জায়গা দিয়ে)।

"ওল্ডবিগ" বর্গটি (নীচে) শৈলীতে ক্রোম 66.0.3359.181, ফায়ারফক্স কোয়ান্টাম 60.0.2, এজ 42.17134.1.0 এবং আইই 11.48.17134.0 এ সঠিকভাবে পরীক্ষা করা হয়েছে এবং কাজ করেছে। দুর্ভাগ্যক্রমে, এটি ক্রোম সংস্করণ broke 76 এবং এর ডেরিভেটিভসে ভেঙে গেছে (আগস্ট 2019-এর দিকে)। লক্ষণটি হ'ল লাইনগুলির মধ্যে অতিরিক্ত স্থান আর প্রদর্শিত হয় না।

"নিউবিগ" শ্রেণিটি ক্রোমের বর্তমান সংস্করণগুলিতে (76.0.3809.132), অপেরা, ফায়ারফক্স, এজ, আইই, সাহসী এবং পালেমুনে সঠিকভাবে পরীক্ষা করা এবং কাজ করছে:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

এখানে একটি ডেমো রয়েছে:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

এটি ফলাফল, ক্রোম v.76 এ প্রদর্শিত:

Answer 11

এটি কাজ করবে তবে কেবল আইই তে। আইই 8 তে এটি পরীক্ষা করেছি।

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

Answer 12

আমি একটি স্থাপিত <br>একটি মধ্যে ট্যাগটি <span>ট্যাগ এবং ব্যবহার করতে পারবেন ছিল display:none;উপর <span>যখন ব্যবহার না করার নিয়ন্ত্রণে <br>মিডিয়া কুয়েরি ব্যবহার ট্যাগ।

Comments

কেন <br>এটি স্প্যানের মোড়কের পরিবর্তে সরাসরি টার্গেট করবেন না ?

— গাভিন

Answer 13

পুরানো প্রশ্ন তবে এটি একটি সুন্দর ঝরঝরে এবং পরিষ্কার সমাধান, এমন লোকদের জন্য সম্ভবত এটি ব্যবহারে আসতে পারে যারা এখনও এটি ভাবছেন যে এটি সম্ভব কিনা :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

এই ফিক্সটির সাহায্যে আপনি ওয়েবসাইটগুলিতে বিআরগুলিও সরিয়ে ফেলতে পারেন (কেবল প্রস্থটি 0 পিক্সারে সেট করুন)

Answer 14

শুধু এইচআর ট্যাগ ব্যবহার করবেন না কেন? আপনি যা চান ঠিক এটি তৈরি করা হয়েছে। কিন্ডা যখন টেবিলে আপনার সামনে ঠিক একটি চামচ থাকে তখন স্যুপ খাওয়ার জন্য কাঁটাচামচ তৈরি করার চেষ্টা করার মতো।

Comments

সমস্ত ব্যবহারের ক্ষেত্রে কাজ করে না কারণ এইচআর একটি ব্লক উপাদান - এর জন্য স্টাইলিং সীমাবদ্ধ

— থারিয়ামা

স্পষ্টতই তিনি পরিষ্কার ব্যবহার করতে চান: সমস্ত, গ্যাবরের দুর্দান্ত উত্তর দেখুন। সুতরাং আপনার কাঁটাচামক রূপকটি কিছুই বুঝতে পারে না।

— এডি 147