এইচটিএমএল (+ সিএসএস): একটি লাইন বিরতির জন্য পছন্দসই জায়গাটি চিহ্নিত করা

109

ধরা যাক আমার এই পাঠ্যটি রয়েছে যা আমি একটি HTML টেবিল ঘরে প্রদর্শন করতে চাই:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

এবং আমি চাই যে কোনও একটি কমা পরে লাইনটি পছন্দসইভাবে ভেঙে যায়।

এইচটিএমএল উপস্থাপককে কিছু নির্ধারিত স্থানে ভাঙ্গার চেষ্টা করতে বলার কোনও উপায় আছে, এবং কোন ব্রেক -স্পেস ব্যবহার না করেই কোনও একটি ফাঁকা জায়গা ভাঙার চেষ্টা করার আগে প্রথমে তা করবেন ? যদি আমি অ-ব্রেকিং স্পেস ব্যবহার করি তবে এটি প্রস্থকে নিঃশর্তভাবে আরও বড় করে তোলে। আমি চাই যে কোনও একটি ফাঁকের পরে লাইন বিরতি ঘটুক, যদি লাইন-মোড়ক অ্যালগরিদম এটি প্রথম কমা দিয়ে চেষ্টা করে থাকে এবং লাইনটি ফিট করতে না পারে।

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

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

দ্রষ্টব্য: দেখে মনে হচ্ছে সিএসএস 3text-wrap: avoid আচরণটি আমি যা চাই তা কিন্তু এটি কাজ করে বলে মনে হয় না।

html css word-wrap

— জেসন এস
সূত্র

আপনি স্প্যানগুলির ভিতরে নন-ব্রেকিং-স্পেস ব্যবহার করতে পারেন ।

— গ্যাব্রিয়েল পেট্রিওলি

3

তবে আমি নন- ব্রেকিং স্পেস ব্যবহার করতে চাই না । আমি "না-চাই-বিরতি এখানে-না-করতে চাই-তবে-আমি-চাই-যদি-করতে-হবে" স্পেস ব্যবহার করতে চাই তবে আমি যতদূর জানি, সেগুলি বিদ্যমান।

— জেসন এস

@ জেসন .. আমি আপনাকে অনুভব করি .. তবে এটি সম্ভব নয় .. একটি উত্তর যুক্ত করলেন।

— গ্যাব্রিয়েল পেট্রিওলি

drat, কম্পিউটার বিজ্ঞানীরা টাইপোগ্রাফারদের থেকে রেন্ডারিং অ্যালগরিদম ডাব্লু / ও ইনপুট লিখলে তা ঘটে।

— জেসন এস

1

আপনার @ EggertJthannesson এর উত্তরটি গ্রহণ করা উচিত কারণ এটি একটি ভাল কাজের সুযোগ দেয়!

— গ্যাব্রিয়েল পেট্রিওলি

156

ব্যবহার করে

span.avoidwrap { display:inline-block; }

এবং পাঠ্যটি মোড়ানোতে আমার একসাথে রাখতে চাই

<span class="avoidwrap"> Text </span>

এটি প্রথমে পছন্দসই ব্লকগুলিতে এবং তারপরে প্রয়োজন অনুসারে ছোট ছোট টুকরো টুকরো করবে।

— এগার্ট জাহানসন
সূত্র

16

দুর্দান্ত কাজ! কেবলমাত্র একটি অতিরিক্ত নোট: একটি ইনলাইন-ব্লকের শুরুতে এবং শেষের ফাঁকা স্থানগুলি এড়ানো হবে, যাতে ফাঁকে ফাঁকে ফাঁকে পাঠ্যপদ্ধতি করতে আপনাকে এটিকে ইনলাইন-ব্লকের মধ্যে স্থাপন করতে হবে। উদাহরণস্বরূপ, যদি স্প্যানগুলি ইনলাইন-ব্লক হওয়ার জন্য স্টাইল করা হয়, তবে Hello worldতা হবে Helloworldএবং Hello worldসাধারণ হবে Hello world।

— ব্যবহারকারী

2

<ডাব্লুবিআর> আরও শব্দার্থক এবং ব্রাউজারে নিয়ন্ত্রণ ছেড়ে দেয় যা সাধারণত ভাল জিনিস। এই ক্ষেত্রে এটি ব্রেকিং-যখন-অত্যাবশ্যককে সম্ভব করে তোলে।

— লোডেভিজক

দুর্দান্ত কাজ করে - যখন এটি গুরুত্বপূর্ণ হয়, "-" অবিরামের মতো চরিত্রগুলি। উদাহরণ: পেরিকলস <স্প্যান ক্লাস = "এড়ানো"> (ওঁ & nbsp; 500-429 & nbsp; ভি। সিআর।)

— সারা গাছগুলি

10

@ লোডউইজক: লাইনটি ভাঙ্গার জন্য পছন্দসই জায়গাটি নির্দেশ করে না , তবে একটি সম্ভাব্য জায়গা ।

— ড্যান ড্যাসক্লেস্কু

1

নোট করুন যে এই কৌশলটি নেস্টেডদের জন্যও কাজ করে, তাই আপনি পছন্দসই ব্রেকপয়েন্টগুলির একটি শ্রেণিবিন্যাস নির্দিষ্ট করতে পারেন (কার্যকরভাবে) ।

— মাইকেল ডাইক

24

ড্যান মল থেকে একটি খুব ঝরঝরে আরডাব্লুডি-সমাধান রয়েছে যা আমি পছন্দ করি। আমি এটি এখানে যুক্ত করতে চলেছি কারণ প্রতিক্রিয়াশীল লাইন বিরতি সম্পর্কিত অন্যান্য কিছু প্রশ্নগুলির এটির সদৃশ হিসাবে চিহ্নিত করা হয়েছে।
আপনার ক্ষেত্রে আপনার থাকতে হবে:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

এবং আপনার মিডিয়া ক্যোয়ারিতে সিএসএসের একটি লাইন:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

— স্টিফান ওয়েইনহোল্ড
সূত্র

7

একটি সহজ উত্তর শূন্য প্রস্থের স্থান অক্ষর  ব্যবহার করা এটি নির্দিষ্ট পয়েন্টগুলিতে শব্দের ভিতরে ব্রেকস্পেস তৈরি করতে ব্যবহৃত হয় ।

কি সঠিক বিপরীত এর অ ভঙ্গ স্থান   (অবশ্য আসলে শব্দ-যোজক ⁠ ) ( শব্দ-যোজক শূন্য-চওড়া সংস্করণ অবিচ্ছিন্ন স্পেস )

(এছাড়াও আছে মত অন্যান্য অ অবিচ্ছিন্ন কোড আছে অবিচ্ছিন্ন হাইফেন ‑ ) (এখানে বিভিন্ন উপর একটি ব্যাপক উত্তর এর 'রূপ' Nbsp )

আপনি যদি কেবল এইচটিএমএল (কোনও সিএসএস / জেএস নেই) সমাধান চান তবে আপনি শূন্য-প্রস্থের স্থান এবং অ-ব্রেকিং স্পেসের সংমিশ্রণটি ব্যবহার করতে পারেন , তবে এটি সত্যিই অগোছালো হবে would , এবং একটি মানব-পঠনযোগ্য সংস্করণ লেখার জন্য কিছুটা প্রচেষ্টা দরকার ।

ctrl+ c, ctrl+ vসহায়তা করে

উদাহরণ:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

অপাঠ্য? এটি কোনও মন্তব্য ট্যাগ সহ একই HTML:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

তবে, যেহেতু ইমেল এইচটিএমএল রেন্ডারিং পুরোপুরি মানসম্পন্ন নয়, তাই এই ধরণের ব্যবহারের পক্ষে ভাল কারণ এই সমাধানটি কোনও সিএসএস / জেএস ব্যবহার করে না since

এছাড়াও, আপনি যদি এটি ভিত্তিক সমাধানগুলির সাথে একত্রে ব্যবহার করেন তবে আপনার লাইন-ব্রেকিং অ্যালগরিদমের সম্পূর্ণ নিয়ন্ত্রণ থাকবে

(সম্পাদকীয় নোট :)

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

— সম্প্রদায়
সূত্র

1

স্প্যান হ্যাক কি?

— জেসন এস

স্প্যান ট্যাগগুলির সুবিধা নিয়ে অন্য উত্তরগুলি।

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

3

উত্তরটি হ'ল না ( আপনি ব্যবহৃত লাইন ব্রেকিং অ্যালগরিদম পরিবর্তন করতে পারবেন না )।

কিন্তু কিছু সমাধান নীচে উপস্থিত হয় ( শ্রেষ্ঠ এক গৃহীত উত্তর )

আপনি অ-ব্রেকিং-স্পেসের সাথে কাছাকাছি যেতে পারেন  তবে কেবল যে শব্দের সাথে একসাথে চলে যায় ( যা আপনার স্প্যানগুলিতে রয়েছে তবে কমা পরে নয় ) বা আপনি white-space:nowrap@ মার্কেল উল্লিখিত হিসাবে ব্যবহার করতে পারেন ।

উভয় সমাধানই একই কাজ করে এবং উভয় শব্দের একটি গ্রুপ ভাঙবে না যদি এটি নিজের মতো না খায়।

— গ্যাব্রিয়েল পেট্রিওলি
সূত্র

আহা। :-( যে দুর্গন্ধযুক্ত, এর অর্থ আমার হয় এটির সাথেই বেঁচে থাকতে হবে, বা লাইন ব্রেকিং অ্যালগরিদমকে পরাস্ত করার চেষ্টা করার জন্য আমার নিজের দীর্ঘ লাইনগুলি সনাক্ত করার চেষ্টা করা উচিত

— জেসন এস

আমি আপনার উত্তরটি সম্পাদন করেছিলাম যেভাবে আপনার প্রথম লাইনটি অঙ্কিত করার কারণে প্রায় পড়া শুরু করিনি, কারণ আমি প্রায় পাঠ্যক্রম অবিরত করি নি।

— অ্যারোটবিয়ার

@ আরুতবীর: আমি আপনার সম্পাদনাটিকে সমর্থন করি তবে গ্যাবি তা ফিরিয়ে দিয়েছে। গ্যাবি: কেন? আপনি কি ব্যবহারকারীদের বিভ্রান্ত করতে চান?

— ড্যান ড্যাসক্লেস্কু

@ ড্যানডাসকলেসকু, সমস্ত উত্তর কি একই পাতায় গৃহীত উত্তরকে নির্দেশ করার জন্য তাই পরিবর্তন করা উচিত? আমার উত্তরের 1 ( যোগফল ) ভোট রয়েছে এবং 48 টি ভোট সহ একটি স্বীকৃত উত্তর রয়েছে। আমি নিশ্চিত যে স্বীকৃত ব্যক্তিটিই সেই দৃষ্টি আকর্ষণ করছে ( এবং ঠিক তাই )। তদ্ব্যতীত, আমি জোর দিয়ে বলছি যে ব্রেকিং অ্যালগরিদম ব্যবহারের কোনও উপায় নেই ( যেমন ওপি বলেছে )

— গ্যাব্রিয়েল পেট্রোলি

1

আমার সমাধান আপনার নিজের যুক্তি আপনার বিরুদ্ধে ব্যবহার করে দেখুন। যেকোনও স্প্যান সমাধানের সাথে এটি একত্রিত করুন, তারপরে আপনার লাইন-ব্রেকিং অ্যালগরিদমের সম্পূর্ণ নিয়ন্ত্রণ থাকবে

2

আপনার মার্ক আপ আপ ব্যবহারের সাথে span { white-space:nowrap }। এটি সত্য হিসাবে আপনি আশা করতে পারেন হিসাবে ভাল।

— মার্সেল
সূত্র

ধন্যবাদ, তবে এটি কাজ করবে না কারণ এটি মূলত একটি spanউপাদানের  মধ্যে ফাঁকা স্থানান্তর করে এবং স্পেসগুলি একেবারে ভাঙা থেকে রক্ষা করে। আমি কেবল রেন্ডারকে আমার আইটেমগুলির মধ্যে একটির মধ্যে বিরতি থেকে নিরুৎসাহিত করতে চাই, তবে যদি এটি করতে হয় তবে আমি এটি এটি করতে চাই।

— জেসন এস

@ জেসন এস: আমি আমার উত্তরে অন্যান্য বিকল্প যুক্ত করেছি।

— মার্সেল

 স্থানের চেয়ে আলাদা কীভাবে ? আমি যা বলতে পারি তা থেকে পছন্দগুলি হয় কোনও প্রদত্ত চরিত্র বিরতি দেয় বা না দেয়। সুতরাং '-' এবং '' এবং এবং এবং সমস্ত কিছু বিরতি দেয় (একটি হাইফেন, স্থান, কিছুই নয়, এবং হাইফেন-কেবলমাত্র-বিরতি যথাক্রমে), যেখানে  নেই does

— জেসন এস

@ জেসন এস: উদাহরণ ব্যবহারের যোগ।

— মার্সেল

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

— জেসন এস

0

নতুন উত্তর এখন আমাদের এইচটিএমএল 5 আছে:

এইচটিএমএল 5 ট্যাগটি পরিচয় করিয়ে দেয় । (এর অর্থ ওয়ার্ড ব্রেক ব্রেক for

একটি যুক্ত করা ব্রাউজারকে অন্য কোথাও আগে সেখানে বিরতি দিতে বলে, তাই কমাতে কথায় শব্দ ভাঙ্গা সহজ:

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

এটি IE বাদে আমার সমস্ত বড় ব্রাউজার সমর্থিত।

— ACarter
সূত্র

12

-1। আপনি পরামর্শ দেওয়ার আগে পরীক্ষা করলেন না কেন? এটি কাজ করে না। অন্য উদ্দেশ্য আছে। এমন নয় যে এই উত্তরটি একটি অনুরূপ উল্লেখ উত্তর যে দীর্ঘ আগে অস্তিত্ব।

— ব্যবহারকারী

1

ডাব্লুবিআরের অন্য উদ্দেশ্য নেই। বিকাশকারী.মোজিলা.আর.ইন-

— লোডউইজক

13

একটি বিরতি সুযোগ সেট আপ; এটি "ব্রাউজারকে অন্য কোথাও আগে ভেঙে ফেলার কথা" বলে না। কোনও জায়গার আগে এটি ব্যবহৃত হয়, এটি সাধারণত অকেজো, যেহেতু স্পেসগুলি সাধারণত লাইন ব্রেকের সুযোগ থাকে।

— Jukka K. Korpela

5

এটি কোনও ব্রাউজারে মোটেই কাজ করে না। উত্তরটি ভুল: সাধারণ সাদা স্থানের তুলনায় লাইন বিরতিটিকে অগ্রাধিকার দেয় না । সুতরাং মোড়ানো উদাহরণ হিসাবে স্বাভাবিক হিসাবে ঘটে।

— অ্যাড্রিয়ান

3

স্পষ্ট করার জন্য, <ডাব্লুবিআর> এর উদ্দেশ্য "এখানে এমন একটি জায়গা যা আপনি ভেঙে ফেলতে পারেন", যখন সেই অবস্থানটি অন্যথায় কোনও শব্দের মধ্যে বিবেচিত হবে । এটি বলেছে "এই দুটি চরিত্রের মধ্যে স্পটকে এমন আচরণ করুন যেন সেখানে কোনও জায়গা থাকে", "এখানে ভাঙ্গতে পছন্দ করেন না"। যদি ইতিমধ্যে কোনও স্থান থাকে তবে এর কোনও অর্থ নেই।

— সেমিকোলন

-1

আপনি কেবল সিএসএসে মার্জিন সেটিংস সামঞ্জস্য করতে পারেন (এই ক্ষেত্রে মার্জিন-ডান)।

text {
    margin-right: 20%;
}

— gooflord
সূত্র

-3

<div>পরিবর্তে ব্যবহার করুন , বা স্প্যানের জন্য একটি শ্রেণি নির্দিষ্ট করুন এবং এটি প্রদর্শন: ব্লক বৈশিষ্ট্যটি দিন।

— justacoder
সূত্র

-5

For এর জন্য একটি এইচটিএমএল উপাদান রয়েছে: (বর্তমানে মানক) উপাদান ।

আমি আপনাকে এটি ব্যবহার করার পরামর্শ দেব। এটি সর্বত্র নাও চলতে পারে তবে হুপস না করেই আপনি সবচেয়ে ভাল এটি করতে পারেন।

— ম্যাথিয়াস ব্যেনেন্স
সূত্র

3

-1: খুব দীর্ঘ শব্দে ব্রেক পয়েন্ট চিহ্নিত করার জন্য, এটি পছন্দসই লাইন ব্রেকগুলির সাথে সমস্যার সমাধান করতে পারে না

— ব্যবহারকারী

4

@ ব্যবহারকারী 3075942 স্পেক থেকে সরাসরি উক্তি : " wbrউপাদানটি একটি লাইন বিরতির সুযোগ উপস্থাপন করে।" এই ঠিক কি ওপি চাইলেন। আপনি উইকিসে যা পড়েছেন তার উপর ভিত্তি করে লোককে ডাউনভোট করা বন্ধ করুন।

— ম্যাথিয়াস বায়েন্স

3

হ্যাঁ, সুযোগ । তবে ব্রাউজারগুলির মধ্যে ইতিমধ্যে স্পেসে বিরতি দেওয়ার সুযোগ রয়েছে। প্রশ্নটি কীভাবে কোনও ব্রাউজারকে বলতে হয় যে কোন স্থানগুলিতে এটি ভাঙ্গা ভাল।

— ব্যবহারকারীর

1

… এবং উত্তরটি ব্যবহার করা ।

— ম্যাথিয়াস বাইনেস

8

না, এটি উত্তর নয়। এটি নির্দিষ্ট পূর্ব-বিদ্যমান ব্রেক পয়েন্টের ব্যবহারযোগ্যতা ব্যবহারের সম্ভাবনা বাড়ায় না; এটি কেবলমাত্র একটি নতুন ব্রেক পয়েন্টের ইতিবাচকতা যুক্ত করে, যেখানে একটি ইতিমধ্যে বিদ্যমান নেই। একপর্যায়ে দুটি সম্ভাবনা থাকা কোনও কাজের নয়। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস