এইচটিএমএল উপাদানগুলির মধ্যে লাইন বিরতি এড়িয়ে চলুন

109

আমার আছে এটা <td> উপাদানটি রয়েছে:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

আমি এটি একটি একক লাইনে রাখার আশা করছিলাম, তবে এটি আমি পেয়েছি:

এখানে চিত্র বর্ণনা লিখুন

আপনি দেখতে পাচ্ছেন, পতাকা এবং টেলিফোন নম্বর পৃথক লাইনে রয়েছে। দ্য টেলিফোন নম্বর এর সংখ্যার মধ্যে কাজ করছে, কিন্তু পতাকা ও টেলিফোন নম্বর মধ্যে নয়।

আমি কীভাবে এটি নিশ্চিত করতে পারি যে কোনও লাইন-ব্রেক কোনও রেন্ডারার দ্বারা প্রবর্তিত হয়নি?

html whitespace

— blueFast
সূত্র

144

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

সর্বাধিক শক্তিশালী বিকল্প হ'ল nobrমার্কআপ ব্যবহার করা , যা নন-স্ট্যান্ডার্ড তবে সার্বজনীন সমর্থিত এবং সিএসএস অক্ষম থাকা অবস্থায়ও কাজ করে:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(আপনি  এই ক্ষেত্রে ফাঁকের পরিবর্তে ব্যবহার করতে পারেন, তবে প্রয়োজন নেই ))

আর একটি উপায় হ'ল nowrapবৈশিষ্ট্য (অবচয় / অপ্রচলিত, তবে এখনও কিছুটা বিরল quirks বাদে ভাল কাজ করছে):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

তারপরে সিএসএস উপায় রয়েছে, যা সিএসএস সক্ষম ব্রাউজারগুলিতে কাজ করে এবং আরও কিছু কোড প্রয়োজন:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— জুক্কা কে। কোরপেলা
সূত্র

16

পুনঃ নবার, মোজিলা সতর্ক করে দিয়েছে "এই বৈশিষ্ট্যটি মানহীন এবং মানক ট্র্যাকের উপরে নেই the এটি ওয়েবের মুখোমুখি প্রোডাকশন সাইটগুলিতে ব্যবহার করবেন না: এটি প্রতিটি ব্যবহারকারীর পক্ষে কাজ করবে না implement বাস্তবায়ন এবং এর মধ্যে বৃহত অসামঞ্জস্যতাও থাকতে পারে আচরণ ভবিষ্যতে পরিবর্তিত হতে পারে। " - ডেভেলপার.মোজিলা.আর.ইন-

— লূক

1

@ লুক, এটি একটি "স্ট্যান্ডার্ড" সতর্কতা। তারা কোনও অসম্পূর্ণতা (এমনকি একটি ছোট) বর্ণনা করে না এবং এমন কোনও ব্রাউজারের কথা উল্লেখ করে না যা সমর্থন করে না nobr; কেউ নেই।

— জুলকা কে। করপেলা

23

nobrট্যাগ ব্যবহার হিসাবে একই বিষয়শ্রেণীতে অন্তর্ভুক্ত হয় blink: w3.org/TR/html5/obsolete.html#obsolete হয় আপনি ওয়েব মান লক্ষ্যে কাজ অথবা আপনি একটি বিশৃঙ্খল ওয়েব লক্ষ্যে কাজ। সিদ্ধান্ত আপনার.

— লুক

8

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে ইতিমধ্যে একটি ক্লাস "টেক্সট-নাওর্যাপ" সংজ্ঞায়িত করা হয়েছে যা স্টাইপকে সে অনুযায়ী সেট করে।

— রাতাতভিজার

4

@ জুক্কা.কর্পেলা, এইচটিএমএল 5 এখন চূড়ান্ত হয়েছে এবং খুব আশ্চর্যজনকভাবে nobrএখনও অবমূল্যায়িত হয়েছে এবং "অবশ্যই ব্যবহার করা উচিত নয়" ।

— মার্কাস

57

সিডিএস এর জন্য টিডি: white-space: nowrap;এটি সমাধান করা উচিত।

— tcak
সূত্র

7

আপনার যদি বেশ কয়েকটি শব্দ বা উপাদানগুলির জন্য এটির প্রয়োজন হয় তবে এটি পুরো টিডি বা অনুরূপ হিসাবে প্রয়োগ করতে না পারেন তবে স্প্যান ট্যাগটি ব্যবহার করা যেতে পারে।

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

আপনি যদি ক্লাস ভার্সন ব্যবহার করেন তবে গ্রহণযোগ্য উত্তরে বিস্তারিত হিসাবে সিএসএস সেটআপ করতে ভুলবেন না।

— গ্রেগ লিটল
সূত্র

2

যদি <i>ট্যাগটি কোনও ব্লক হিসাবে প্রদর্শিত হয় না এবং প্রব্লেম ঘটায় তবে তা কাজ করা উচিত:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— ameagher
সূত্র

2

কিছু ক্ষেত্রে (যেমন এইচটিএমএল তৈরি এবং জাভাস্ক্রিপ্ট দ্বারা সন্নিবেশিত) আপনি একটি শূন্য প্রস্থের সংযোক্তার প্রবেশ করানোর চেষ্টা করতে পারেন:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

স্নিপেট প্রসারিত করুন

— হুগো ডের হাঞ্জ্রি
সূত্র

2

এটিই আসল সমাধান:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

CSS:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

উদাহরণ, চিত্রগুলি সর্বদা পাঠ্যের আগে:

— আন্দ্রে ইজমান
সূত্র

-1

nobr খুব অবিশ্বাস্য, টেবিল ব্যবহার করুন

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

এটি সমস্ত একই লাইনে চলেছে, প্রত্যেকের সাথে প্রতিটি স্তরের এবং আপনি যদি পরে কিছু পরিবর্তন করতে চান তবে আপনার আরও অনেক স্বাধীনতা আছে।

— এরিক Öস্টার্লিং
সূত্র