কীভাবে কোনও টেবিল কক্ষে পাঠ্যটিকে মোড়ানো থেকে আটকাতে হবে


285

কেউ কি জানেন যে আমি কীভাবে কোনও টেবিল সেলের পাঠ্য মোড়ানো থেকে আটকাতে পারি? এটি কোনও টেবিলের শিরোনামের জন্য, এবং শিরোনামটি এর অধীনে থাকা ডেটার চেয়ে অনেক দীর্ঘ but কলামটি খুব প্রশস্ত হলে এটি ঠিক আছে।

আমার (সরলীকৃত) টেবিলের এইচটিএমএল দেখতে এই রকম দেখাচ্ছে:

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

thপৃষ্ঠায় জাভাস্ক্রিপ্ট সম্পর্কিত কারণে শিরোনামটি ট্যাগের অভ্যন্তরে একটি ডিভের মধ্যে আবদ্ধ ।

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

কোন ধারনা?

উত্তর:


485

এই জাতীয় white-spaceসম্পত্তি ব্যবহার করুন:

th {
    white-space: nowrap;
}

এটি সামগ্রীগুলিকে <th>এক লাইনে প্রদর্শন করতে বাধ্য করবে ।

সংযুক্ত পৃষ্ঠা থেকে, এখানে বিভিন্ন বিকল্প রয়েছে white-space:

স্বাভাবিক
এই মানটি ব্যবহারকারী এজেন্টদের সাদা স্থানের ক্রমগুলি ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে লাইন বক্সগুলিতে পূরণ করার জন্য লাইনগুলিকে নির্দেশ দেয়।

প্রাক
এই মানটি ব্যবহারকারীর এজেন্টদের সাদা স্থানের ক্রমগুলি ভেঙে ফেলা থেকে বাধা দেয়। রেখাগুলি কেবল সংরক্ষিত নিউলাইন অক্ষরগুলিতেই ভাঙা হয়।

nowrap
এই মানটি 'স্বাভাবিক' হিসাবে সাদা স্থানটি ধসে পড়ে, তবে পাঠ্যের মধ্যে লাইন ব্রেকগুলি দমন করে।

প্রাক-মোড়ানো
এই মানটি ব্যবহারকারীর এজেন্টদের সাদা স্থানের ক্রমগুলি ভেঙে ফেলা থেকে বাধা দেয়। সংরক্ষিত নিউলাইন অক্ষরগুলিতে লাইনগুলি ভাঙা হয় এবং লাইন বাক্সগুলি পূরণ করার জন্য প্রয়োজনীয়।

প্রাক-লাইন
এই মানটি ব্যবহারকারী এজেন্টদের সাদা স্থানের ক্রমগুলি ধসের নির্দেশ দেয়। সংরক্ষিত নিউলাইন অক্ষরগুলিতে লাইনগুলি ভাঙা হয় এবং লাইন বাক্সগুলি পূরণ করার জন্য প্রয়োজনীয়।


8
একই কক্ষে ইনপুট ক্ষেত্র এবং বোতামের জন্য কাজ করে না। এলোমেলোভাবে নীচে রাখে।
ডুমসকনাইট

16
Tabletable-layout:fixed;এটি কাজ করার জন্য উপাদানটির অবশ্যই থাকতে হবে ।
ড্যানিলোকিও

@ ডুমসকাইটে আপনি কি কোনও ইনপুট ক্ষেত্র এবং একই ঘরে একটি অন্য উপাদান দিয়ে এটি অর্জনের উপায় খুঁজে পেয়েছেন?
loveNoHate

সাদা-স্থান: প্রাক; আমার যা প্রয়োজন ছিল -28.04 - এবং 28.04 এর মধ্যে মোড়ানো ছিল
ব্রেন্ট

1
@ ডুমসকনাইটে আমার একই সমস্যাটি একটি চেকবক্সের সাথে ছিল এবং সিএসএস আপডেট করে সমাধান করেছিinput { display: inline; }
প্রোগ্রামার্স

66
<th nowrap="nowrap">

অথবা

<th style="white-space:nowrap;">

অথবা

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

6
নোট যে nowrapহ্রাস করা হয়েছে। w3.org/TR/html401/struct/tables.html#h-11.2.6 । পরিবর্তে স্টাইল শীট ব্যবহার করুন।
উইসবাকি

বিঃদ্রঃ. যদি অযত্নে ব্যবহার করা হয় তবে এই বৈশিষ্ট্যটির ফলে অতিরিক্ত প্রশস্ত কক্ষগুলি দেখা দিতে পারে।
আরিফ মোস্তফা

1
@ উইসবাকি কীভাবে একজন "স্টাইল শীট ব্যবহার করেন"?
রজারডপ্যাক

22

এটি করার জন্য কমপক্ষে দুটি উপায় রয়েছে:

"টিডি" ট্যাগের মধ্যে এখন আর্যাপের বৈশিষ্ট্যটি ব্যবহার করুন:

<th nowrap="nowrap">Really long column heading</th>

আপনার শব্দের মধ্যে অবিচ্ছেদী স্থানগুলি ব্যবহার করুন:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

6
নোট যে nowrapহ্রাস করা হয়েছে। w3.org/TR/html401/struct/tables.html#h-11.2.6 । পরিবর্তে স্টাইল শীট ব্যবহার করুন।
উইসবাকি

6

হাইফেনটিতে পাঠ্য মোড়ানো রোধ করার জন্য আমি এই প্রশ্নে এসেছি।

এটি আমি এটি করেছিলাম:

<td><nobr>Table Text</nobr></td>

রেফারেন্স:

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


এটা যে মূল্য হয় nobr: TAG অ-মানক, এই উত্তরে লিঙ্ক গৃহীত উত্তরে সরু আউট হিসাবে stackoverflow.com/a/8755071/4257
pkaeding

বেশ ঠিক। আপনার বক্তব্য ভালভাবে গ্রহণ করা হয়েছে। আমি এই সমস্ত মন্তব্যগুলি পড়েছি, সংশ্লিষ্ট কমেন্টারদের অভিজ্ঞতা উল্লেখ করেছি এবং রায় ঘোষণা করেছি। হাইফেনটি কিছুটা জটিল। (দ্রষ্টব্য: আপনি যে মন্তব্যটি আপনার মন্তব্যে লিঙ্ক করেছেন তা হ'ল আমি আমার উত্তরে লিঙ্ক করেছি)
সিএসফাস

হ্যাঁ, এটি একই প্রশ্নটি বোঝানো হয়েছিল। আমি কেবল নিশ্চিত হতে চেয়েছিলাম যে ভবিষ্যতে কেউ এই উত্তরটি খুঁজে পেয়েছে এবং লিঙ্কযুক্ত রেফারেন্সটি পড়তে বিরক্ত করবেন না এমন ক্ষেত্রে ক্যাভ্যাটটি এখানে পোস্ট করা হয়েছিল।
পকেডিং

1

প্রতিক্রিয়া / উপাদান UI সঙ্গে ব্যবহারের জন্য

যদি আপনি এখানে ভাবছেন যে প্রতিক্রিয়া তৈরি করার সময় এটি কীভাবে ম্যাটারিয়াল ইউআইয়ের জন্য কাজ করে, আপনি কীভাবে আপনার উপাদানটিতে এটি যুক্ত করবেন তা এখানে <TableHead>:

<TableHead style={{ whiteSpace: 'nowrap'}}>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.