ওভারফ্লো কেন: লুকানো <td> এ কাজ করে না?

Question

আমি একটি টেবিল সেল পেয়েছি যা আমি সর্বদা একটি নির্দিষ্ট প্রস্থ হতে চাই। তবে এটি অপ্রচলিত পাঠ্যের বড় স্ট্রিংগুলির সাথে কাজ করে না। এখানে একটি পরীক্ষার কেস রয়েছে:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

বাক্সটি প্রসারিত না করে বাক্সের প্রান্তে কীভাবে পাঠ্যটি কেটে ফেলা যায়?

Answer 1

এখানেও একই সমস্যা ।

আপনি সেট প্রয়োজন table-layout:fixed এবং সেইসাথে টেবিলের উপাদান উপযুক্ত প্রস্থ overflow:hiddenএবং white-space: nowrapটেবিল কণিকায়।

---

উদাহরণ

স্থির প্রস্থ কলাম

সারণীর প্রস্থ স্থির প্রস্থের (গুলি) এর চেয়ে একই (বা আরও ছোট) হতে হবে।

একটি নির্দিষ্ট প্রস্থ কলাম সহ:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

একাধিক নির্দিষ্ট প্রস্থের কলাম সহ:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

স্থির এবং তরল প্রস্থ কলাম

টেবিলের জন্য একটি প্রস্থ নির্ধারণ করা আবশ্যক , তবে কোনও অতিরিক্ত প্রস্থ কেবল তরল কোষ দ্বারা নেওয়া হয়।

একাধিক কলাম, স্থির প্রস্থ এবং তরল প্রস্থ সহ:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Answer 2

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

আপনার ক্ষেত্রে, বিকল্পটি কোনও ডিআইভিতে টিডির বিষয়বস্তু মোড়ানো এবং ডিআইভিতে প্রস্থ এবং ওভারফ্লো প্রয়োগ করতে পারে।

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

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

Comments

এটি কাজ করে, তবে আমি হেরে যাই vertical-align:middleএবং এমনকি এটি ডিআইভিতে যুক্ত করাও সমস্যার সমাধান করে না।

— মাইকেল

Answer 3

টেবিলটিতে টিএসএল এবং স্টাইলে সিএসএস table-layout:fixed;(এবং কখনও কখনও width:<any px or %>) প্রয়োগ করুন white-space: nowrap; overflow: hidden;। তারপরে সিএসএস প্রস্থগুলি সঠিক ঘর বা কলাম উপাদানগুলিতে সেট করুন।

তাত্পর্যপূর্ণভাবে, স্থির-লেআউট টেবিল কলামের প্রস্থ সারণীর প্রথম সারিতে ঘর প্রস্থ দ্বারা নির্ধারিত হয়। যদি প্রথম সারিতে TH উপাদান থাকে এবং প্রস্থগুলি টিডিতে প্রয়োগ করা হয় (এবং TH হয় না) তবে প্রস্থটি কেবল টিডি-র বিষয়বস্তুতে প্রযোজ্য (সাদা স্থান এবং ওভারফ্লো উপেক্ষা করা যেতে পারে); সেট টিডি প্রস্থ নির্বিশেষে সারণী কলামগুলি সমানভাবে বিতরণ করবে (কারণ [প্রথম সারিতে TH তে কোনও নির্দিষ্ট প্রস্থ নির্দিষ্ট করা হয়নি) এবং কলামগুলিতে [গণনা] সমান প্রস্থ থাকবে; টেবিলটি পরবর্তী সারিগুলিতে টিডি প্রস্থের ভিত্তিতে কলামের প্রস্থকে পুনরায় গণনা করবে না। সারণীর মুখোমুখি হওয়া প্রথম কক্ষের উপাদানগুলির প্রস্থ সেট করুন।

অন্যথা, এবং সেট কলামের প্রস্থে সবচেয়ে নিরাপদ উপায় ব্যবহার করা <COLGROUP>এবং <COL>প্রতিটি নির্দিষ্ট প্রস্থ কল উপর সেট প্রস্থ CSS এর সঙ্গে টেবিলে ট্যাগ। যখন টেবিলটি কলামের প্রস্থটি আগেই জানে তখন সেল প্রস্থ সম্পর্কিত সিএসএস আরও ভাল খেলবে।

Answer 4

আমি নির্দিষ্ট সমস্যাটির সাথে পরিচিত নই, তবে আপনি টিডির অভ্যন্তরে একটি ডিভ ইত্যাদি আটকে রাখতে পারেন এবং এতে ওভারফ্লো সেট করতে পারেন।

Answer 5

ঠিক আছে এখানে আপনার জন্য একটি সমাধান তবে এটি কেন কাজ করে তা আমি সত্যিই বুঝতে পারি না:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

যথা, একটি ডিভের মধ্যে ঘর সামগ্রী মোড়ানো।

Comments

এখানে প্রদর্শিত হিসাবে এটি আরও উন্নত করা যেতে পারে - বিশেষত, এখানoverflow:hidden থেকে সরানো যেতে পারে tdএবং এর প্রস্থটি div100% এ সেট করা যায় যাতে এটি যে কোনও tdপ্রস্থের সাথে কাজ করে (স্বয়ংক্রিয়

— আকারেরগুলি

Answer 6

সেরা সমাধান হ'ল শূন্য প্রস্থ সহ টেবিল ঘরে একটি ডিভিশন রাখা। টেবিলের কোষগুলি সংস্থাগুলি সংজ্ঞায়িত প্রস্থ থেকে তাদের প্রস্থকে উত্তরাধিকারী করবে। অবস্থান: আপেক্ষিক এবং নেতিবাচক মার্জিন কৌশলটি করা উচিত!

এখানে একটি স্ক্রিনশট: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

Comments

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

— গিউলা সুরম্যান

Answer 7

আপনাকে টেবিলের শৈলীর বৈশিষ্ট্যগুলি নির্ধারণ করতে হবে: widthএবং table-layout: fixed;'ওভারফ্লো: লুকানো;' বৈশিষ্ট্য সঠিকভাবে কাজ।

ইমো এটি widthস্টাইলের বৈশিষ্ট্যের সাথে ডিভগুলি ব্যবহার করে আরও ভাল কাজ করে , বিশেষত যখন এটি গতিশীল পুনরায় আকারের গণনার জন্য ব্যবহার করা হয়, টেবিলটিতে একটি সহজ ডিওএম থাকবে যা ম্যানিপুলেশনকে সহজ করে তোলে কারণ প্যাডিং এবং মার্জিনের জন্য সংশোধন প্রয়োজন হয় না

অতিরিক্ত হিসাবে, আপনাকে সমস্ত কক্ষের জন্য প্রস্থ নির্ধারণ করতে হবে না কেবল কেবল প্রথম সারির কক্ষগুলির জন্য।

এটার মত:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

Answer 8

আমি ঠিক একইরকম সমস্যা পেয়েছি এবং প্রথমে ভিতরেটি ব্যবহার <div>করতে <td>হয়েছিল (জন ম্যাকআইন্টির সমাধানটি বিভিন্ন কারণে আমার জন্য কার্যকর হয়নি)।

নোট যদিও এটি <td><div>...</div></td>একটি ডিভের জন্য বৈধ প্লেসমেন্ট নয় তাই পরিবর্তে আমি সেট <span>সহ একটি ব্যবহার করছি display:block;। এটি এখন সূক্ষ্ম বৈধতা দেয় এবং কাজ করে।

Answer 9

সবচেয়ে সহজ এবং সহজ সমাধান যা কাজ করে:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

Answer 10

আরও সহজ করার জন্য আমি টিডি উইচের ভিতরে একটি টেক্সারিয়া রাখার প্রস্তাব দিচ্ছি যা স্বয়ংক্রিয়ভাবে ওভারফ্লো পরিচালনা করে

<td><textarea autofocus>$post_title</textarea></td>

আমেরিকান হতে হবে

Answer 11

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

123456 প্রদর্শন করে