কীভাবে সমস্ত ব্রাউজারে হাইফেনগুলিতে লাইন বিরতি রোধ করা যায়


104

আমাদের সিএমএসে আমাদের একটি ckeditor আছে। আমাদের শেষ ব্যবহারকারীরা সেই সিডিসিটরের মাধ্যমে কিছু দীর্ঘ নিবন্ধটি ইনপুট করবে। আমাদের এই নিবন্ধগুলির হাইফেনগুলিতে লাইন বিরতি রোধ করার একটি উপায় প্রয়োজন need

হাইফেনগুলিতে সমস্ত ব্রাউজারে লাইন বিরতি রোধ করার জন্য কি কোনও উপায় আছে?

বা সেকিডিটারের কি তা প্রতিরোধের বিকল্প রয়েছে?


আপনি গ্রহণযোগ্য উত্তরটি পরিবর্তন বিবেচনা করতে পারেন যেহেতু বর্তমান গৃহীত উত্তরের একটি হ্রাস করা সমাধান রয়েছে
অজৈবিক

উত্তর:


50

আমি ভয় করি যে এটি পাঠ্যটিকে "শব্দ" (বিভক্ত স্পেসে পৃথক পৃথক পৃথক পৃথক অক্ষরের ক্রম) এ বিভক্ত করার এবং nobrমার্কআপের অভ্যন্তরে একটি হাইফেনযুক্ত প্রতিটি "শব্দ" মোড়কের চেয়ে নির্ভরযোগ্যভাবে করার কোনও সহজ উপায় নেই । সুতরাং ইনপুট ডেটা যেমন bla bla foo-bar bla blaপরিণত হবে bla bla <nobr>foo-bar</nobr> bla bla

এমনকি আপনি nobrযখনই "শব্দ" অক্ষর এবং অঙ্ক ব্যতীত কিছু অন্তর্ভুক্ত করে তখনও মার্কআপ সন্নিবেশ করানোর বিষয়টি বিবেচনা করতে পারেন । কারণটি হ'ল কিছু ব্রাউজার এমনকি "2/3" বা "চ (0)" এর মতো স্ট্রিংগুলিও ভেঙে ফেলতে পারে ( ব্রাউজারগুলিতে লাইন ব্রেকিংয়ের বিশদ বিষয়ে আমার পৃষ্ঠাটি দেখুন )।


35
nobrট্যাগ মান না এবং দৃঢ়ভাবে W3C এর দ্বারা নিরুৎসাহিত হয়। দেখুন w3.org/TR/html5/obsolete.html#non-conforming-features
derekerdmann

18
অন্য কোনও পদ্ধতির বিপরীতে, nobrমার্কআপটি সমস্ত ব্রাউজারগুলিতে কাজ করে, স্টাইলশিট অক্ষম থাকাকালীনও কাজ করে এবং বিশেষ অক্ষরগুলিকে সমর্থন করে স্বাধীনভাবে কাজ করে। এটির সাথে কি আসল সমস্যা আছে ?
Jukka K. Korpela

18
<স্প্যান শৈলী = "সাদা-স্থান: Nowrap"> </span> কেন নয়?
ব্রেন্ডন বাইার্ড

6
@ JukkaK.Korpela এর সাথে ইস্যুটি হ'ল আধুনিক ব্রাউজারগুলি এর পক্ষে সমর্থন বাদ দেওয়ার সিদ্ধান্ত নিতে পারে এবং এইচটিএমএল স্পেসিফিকেশন লঙ্ঘন না করে এটি করতে পারে। এটি একটি "উচিত" বৈশিষ্ট্য, যা কেবল প্রয়োগ করার পরামর্শ দেওয়া জিনিস। স্টাইলশিটগুলির ক্ষেত্রে, কোনও ব্যবহারকারী যদি স্টাইল শিটগুলি অক্ষম করে থাকে তবে তারা কোনও স্টাইল না রাখার প্রত্যাশা করে
mirhagk

3
আমি 10 বছর ধরে সাইটগুলি বিকাশ করছি এবং এমনকি আপনার ব্রাউজারে স্টাইলশিট অক্ষম করতেও জানি না। কে সত্যই এটি করে (যারা এই দিন এবং যুগে ডিফল্টরূপে জাভাস্ক্রিপ্ট অক্ষম করার জন্য স্ব-নেপথ্যে বেছে নেবেন)? আমাদের যদি এতটা প্যাডেন্টিক হওয়ার দরকার হয় তবে অফারের বিকল্প সমাধানটি কোথায়?
জন রিক্স

274

আপনি ইউনিকোড নন-BREAKING হাইফেন (ইউ + 2011) যা ব্যবহার করতে পারেন

এইচটিএমএল: &#x2011;বা&#8209;

আরও দেখুন: http://en.wikedia.org/wiki/Hyphen#In_computing


4
তোমার উত্তরের জন্য অনেক ধন্যবাদ। তবে আমাদের যা করা দরকার তা হল সেকিডেটরে লাইন বিরতি রোধ করা যেখানে সমস্ত সামগ্রী শেষ ব্যবহারকারীরা প্রবেশ করবে। আমরা সবাইকে ইউনিকোড নন-ব্রেকিং হাইফেন প্রবেশ করতে বলতে পারি না। লাইন বিরতি রোধ করার অন্য কোনও উপায় আছে কি? বা সেকিডিটারের সাথে হাইফেনটি স্বয়ংক্রিয়ভাবে রূপান্তর করার কোনও বিকল্প নেই? আবার ধন্যবাদ
অ্যালান

9
আপনি প্রতিস্থাপন, একটি সহজ স্ট্রিং রিপ্লেসমেন্ট করতে পারি না -দিয়ে
ছদ্মবেশ

14
U + এ 2011 সীমাবদ্ধ ফন্ট সমর্থন বিষয়ে সতর্ক থাকুন, দেখুন fileformat.info/info/unicode/char/2011/fontsupport.htm
Jukka কে Korpela

7
যদিও এটি তত্ত্বের ক্ষেত্রে অবশ্যই আরও মার্জিত তবে nobrপুরো জায়গাতেই প্লাস্টারিং ট্যাগগুলি, বাস্তবে এটি খুব ভালভাবে কাজ করে না। আইই এটিকে একটি এন ড্যাশ হিসাবে প্রদর্শন করে, সাফারি তার চারপাশে একটি সাধারণ ড্যাশের চেয়ে আরও বেশি জায়গা যুক্ত করে এবং বেশিরভাগ পাঠ্য সম্পাদকরা এটিকে প্রশ্ন চিহ্ন বা বাক্স বা অন্য অর্থহীন চরিত্র হিসাবে প্রদর্শন করে।
Tgr

4
@ জেকাভ আমি ডেরেকারডম্যানের white-space: nowrapপরামর্শ অনুসারে যেতে চাই। লক্ষ্যভিত্তিক অ্যাপ্লিকেশনটি ইউনিকোড-সচেতন হলেও, ফায়ারফক্সের বাইরে অনুলিপি করে আটকানো হলে লজ্জাজনক ড্যাশ এফএফ / উইন 7-এ নিয়মিত ড্যাশ রূপান্তরিত হবে বলে মনে হয়।
Tgr

86

একটি সমাধান হতে পারে অতিরিক্ত spanট্যাগ এবং white-spaceসিএসএস সম্পত্তি ব্যবহার করা। এই জাতীয় ক্লাসটি কেবল সংজ্ঞায়িত করুন:

.nowrap {
    white-space: nowrap;
}

এবং তারপরে আপনার হাইফেনেটেড পাঠ্যের চারপাশে সেই শ্রেণীর সাথে একটি স্প্যান যুক্ত করুন।

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

এই পদ্ধতির সমস্ত ব্রাউজারে ঠিক কাজ করা উচিত - এখানে তালিকাভুক্ত বগি বাস্তবায়ন white-spaceসম্পত্তিটির অন্যান্য মানগুলির জন্য : http://references.sitepPoint.com/css/ white-space#compatibilitysection


1
তোমার উত্তরের জন্য অনেক ধন্যবাদ। তবে আমাদের পাঠ্য সামগ্রীটি শেষ ব্যবহারকারীরা একটি সিডিসিটরের মাধ্যমে প্রবেশ করবে। আমরা সবাইকে শব্দটির চারপাশে <স্প্যান> যোগ করতে বলতে পারি না। এটি অর্জনের অন্য কোনও উপায় আছে কি? যাইহোক ধন্যবাদ
অ্যালান

1
@ অ্যালান - তারা কী ধরণের বিষয়বস্তু যুক্ত করছে যা হাইপেনের উপর ভাঙতে পারে না? যদি এটি কোনও শিরোনাম বা অন্য কোনও উপাদান যা সর্বদা এক লাইনে থাকে white-space: nowrapতবে পুরো ধারকটিতে প্রয়োগ করুন । অন্যথায়, এটি যেতে দিন; প্রথমত, সাধারণ সামগ্রীর জন্য হাইফেনগুলির সাথে লাইন বিরতি রোধ করার কোনও কারণ নেই, এবং দ্বিতীয়ত, আপনি সিকেইডিটারে হ্যাক করতে ইচ্ছুক না হলে আপনি যা যা সন্ধান করছেন তা স্বয়ংক্রিয়ভাবে পাওয়ার পক্ষে কোনও উপায় নেই।
derekerdmann

10
অনেকগুলি পরিস্থিতি রয়েছে যেখানে হাইফেনের পরে একটি লাইন বিরতি খারাপ বা ঠিক খুব ভুল হয় যেমন "F-1" তে বা হাইফেনটিকে যখন "-42 °" হিসাবে একরূপ বিয়োগ হিসাবে ব্যবহার করা হয় (এবং লোকেরা সেভাবে ব্যবহার করে, যেহেতু তারা বিয়োগ চিহ্ন সম্পর্কে জানেন না)।
Jukka K. Korpela

এটি কাজ করে, তবে এটি যে কাজ করে তা সত্য নয় এমন স্বজ্ঞাত, কারণ হাইফেনগুলি সাদা স্থান নয়। <nobr>অনেক পরিষ্কার।
ডেভ বার্টন

2

আপনি প্রতিটি HTML উদাহরণ সম্পাদনা না করে এটি করতে অক্ষম। ফলস্বরূপ, আমি তাদের প্রতিস্থাপনের জন্য কিছু জেএস লিখেছিলাম:

JQuery:

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

ভ্যানিলা জেএস:

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

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

0

হাইফেনের চারপাশে জোড় অক্ষর শব্দটি ব্যবহার করুন &#8288;। এটি আই-তেও কাজ করে।

https://en.wikipedia.org/wiki/Word_joiner

নির্দিষ্ট হাইফেন ঠিক করুন ...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice&#8288;-&#8288;cream'));
}

বা সবকিছু ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1&#8288;-&#8288;$2'));
}

-1

এই সিএসএস চেষ্টা করে দেখুন:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;

7
এই কোড স্নিপেট একটি ব্যাখ্যা সহ প্রশ্নটি সমাধান করতে পারে, যদিও সত্যিই আপনার পোস্টের মান উন্নত করতে সহায়তা করে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, এবং সেই লোকেরা আপনার কোড পরামর্শের কারণগুলি জানেন না। আপনার কোডটি ব্যাখ্যামূলক মন্তব্যে ভিড় না করার চেষ্টা করুন, এটি কোড এবং ব্যাখ্যা উভয়ের পাঠযোগ্যতা হ্রাস করে!
আশিস আহুজা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.