html - example - একটি হাইফেন পরে কোন লাইন বিরতি



css character-encoding (4)

আমি একটি হাইফেনের পরে একটি লাইন বিরতি রোধ করতে চাই - একটি কেস-বাই-কেস ভিত্তিতে যা সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।

উদাহরণ:

আমার এই লেখাটি আছে: 3-3/8" যা এইচটিএমএল এই: 3-3/8”

সমস্যাটি হল লাইনের শেষে, হাইফেনের কারণে এটি সম্পূর্ণ লাইনের মতো চিকিত্সা করার পরিবর্তে পরবর্তী লাইনটি ভেঙে দেয় এবং মোড় নেয় ...

3-
3/8"

আমি "শূন্য প্রস্থ কোন বিরতি অক্ষর" সন্নিবেশ করার চেষ্টা করেছি,  কোন ভাগ্য সঙ্গে ...

3-3/8”

আমি সাফারি এই দেখছি এবং এটি সব ব্রাউজার একই হতে হবে।

নিম্নলিখিত আমার doctype এবং চরিত্র এনকোডিং হয় ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

হাইফেনের পরে লাইন-ব্রেকিং থেকে এগুলি কীভাবে রোধ করতে পারি? আমার পুরো পৃষ্ঠায় যে কোনও সমাধান দরকার নেই ... যা কিছু প্রয়োজন তা আমি সন্নিবেশ করতে পারি, যেমন "শূন্য প্রস্থের বিরতিহীন অক্ষর", যা কাজ করে ব্যতীত।

এখানে একটি ডেমো। হাইফেন লাইন বিরতি না হওয়া পর্যন্ত কেবল ফ্রেম সংকীর্ণ করা।

http://jsfiddle.net/RagKH/


" U+2060 Word Joiner " ঢোকানোর মাধ্যমে আপনি এটি "যোগদানের উপায়" করতে পারেন।

Accept-Charset অনুমতি দেয় তবে ইউনিকোড চরিত্রটি সরাসরি এইচটিএমএল আউটপুটে ঢোকানো যায়।

অন্যথায়, এটি সত্তা এনকোডিং ব্যবহার করে করা যেতে পারে। red-brown টেক্সট যোগদান করার জন্য, ব্যবহার করুন:

red-&#x2060;brown

অথবা (দশমিক সমতুল্য):

red-&#8288;brown

। আরেকটি ব্যবহারযোগ্য চরিত্র হল " U+FEFF Zero Width No-break Space " [⁠ ⁠1] :

red-&#xfeff;brown

এবং (দশমিক সমতুল্য):

red-&#65279;brown

[1] : মনে রাখবেন যে এই পদ্ধতিটি ক্রোম মত প্রধান ব্রাউজারগুলিতে এখনও কাজ করে, এটি ইউনিকোড 3.2 থেকে অব্যবহৃত হয়েছে

" U+2011 নন-ব্রেকিং হাইফেন " সহ "যোগদানের উপায়" এর তুলনা:

  • শব্দ যোগদানের সব হাই অক্ষর জন্য ব্যবহার করা যেতে পারে, শুধু হাইফেন নয়।

  • যোগদানের শব্দটি ব্যবহার করার সময়, বেশিরভাগ রেন্ডারারগুলি একইভাবে পাঠ্যটিকে রাস্টারাইজ করবে। ক্রোমে, ফায়ারফক্স, IE এবং অপেরা, সাধারণ হাইফেনগুলির রেন্ডারিং, উদাহরণস্বরূপ:

    abcdefghijklmnopqrstu-vwxyz

    স্বাভাবিক হাইফেনের রেন্ডারিং (U + 2060 Word Joiner) সহ, যেমন:

    একটি ⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠r-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

    যখন উপরের দুটি রেন্ডারগুলি " নন-ব্রেকিং হাইফেন " র উপস্থাপনা থেকে আলাদা, যেমন:

    একটি-B-সি-ডি-ই-এফ জি এইচ-আই-ঞ-K-L-M-এন-O-P-Q-আর-এস-টি-U-ভি-W-এক্স-y- z- র

    । (পার্থক্যটি হ'ল ব্রাউজার-নির্ভরশীল এবং ফন্ট-নির্ভরশীল। যেমন " arial " ফন্ট ঘোষণা করার সময়, ফায়ারফক্স এবং IE11 অপেক্ষাকৃত বিশাল বৈচিত্র দেখায়, যখন ক্রোম এবং অপেরা ছোট বৈচিত্র দেখায়।)

<span class=c1></span> (CSS .c1 {white-space:nowrap;} ) এবং <nobr></nobr> সহ "যোগদানের উপায়" এর তুলনা:

  • শব্দ যোদ্ধাটি এমন পরিস্থিতিতে ব্যবহার করা যেতে পারে যেখানে HTML ট্যাগগুলির ব্যবহার সীমিত করা হয়, যেমন ওয়েবসাইট এবং ফোরামের ফর্ম।

  • উপস্থাপনা এবং সামগ্রীর বর্ণালীতে , সংখ্যার তুলনায় সংখ্যাগরিষ্ঠতা সংযোজনকারী শব্দটিকে আরও কাছাকাছি বিবেচনা করবে।

• উইন্ডোজ 8.1 কোর 64-বিট ব্যবহার করে পরীক্ষিত হিসাবে:
• IE 11.0.9600.18205
• ফায়ারফক্স 43.0.4
• ক্রোম 48.0.2564.109 (আনুষ্ঠানিক বিল্ড) মি (32-বিট)
• অপেরা 35.0২066.9২


IE8 / 9 ক্যান্সপিস এর উত্তরগুলিতে উল্লিখিত নন-ব্রেকিং হাইফেনটি একটি আদর্শ হাইফেনের চেয়ে বেশি। এটি একটি সাধারণ হাইফেন পরিবর্তে একটি এন-ড্যাশের দৈর্ঘ্য। এই প্রদর্শন পার্থক্য আমার জন্য একটি চুক্তি বিরতি ছিল।

আমি ডিবে দ্বারা নির্দিষ্ট সিএসএস উত্তর ব্যবহার করতে পারিনি বরং পরিবর্তে কোন বিরতি ট্যাগ ব্যবহার করা বেছে নিলাম।

<nobr>e-mail</nobr>

উপরন্তু আমি একটি হাইফেন বিরতি IE8 / 9 সৃষ্টির একটি নির্দিষ্ট দৃশ্যকল্প পাওয়া যায়।

  • একটি স্ট্রিং অ ভাঙা স্পেস দ্বারা আলাদা শব্দ রয়েছে - &nbsp;
  • প্রস্থ সীমিত
  • একটি ড্যাশ রয়েছে

IE এটি ভালো রেন্ডার করে।

নিম্নলিখিত কোড উপরে অঙ্কিত সমস্যা reproduces। IE10 তে IE8 রেন্ডারিংয়ের জন্য একটি মেটা ট্যাগ ব্যবহার করতে হয়েছিল কারণ IE10 এটিকে সংশোধন করেছে। এটি কোন মেইল ​​ট্যাগ কারণ এটি মেটা ট্যাগ সমর্থন করে না।

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

আপনি সঙ্গে প্রাসঙ্গিক টেক্সট মোড়ানো পারে

<span style="white-space: nowrap;"></span>

পার্টি দেরী, কিন্তু আমি এই আসলে সবচেয়ে মার্জিত মনে হয়। ওয়ার্ড JOINER ইউনিকোড চরিত্র & # 8288 ব্যবহার করুন ; আপনার হাইফেন, অথবা এম ড্যাশ, বা কোন অক্ষরের উভয় পাশে।

সুতরাং, তাই ভালো:

&#8288;—&#8288;

এটি উভয় প্রান্তে প্রতিবেশীর কাছে প্রতীক যোগ করবে (একটি স্থান যুক্ত না করে) এবং লাইন ভাঙা প্রতিরোধ করবে।





hyphenation