কোনও টেবিলের ঘরে CSS টেক্সট-ওভারফ্লো?

Question

আমি text-overflowএকটি টেবিল ঘরে সিএসএস ব্যবহার করতে চাই , যেমন পাঠ্যটি যদি একটি লাইনে ফিট না হয় তবে এটি একাধিক লাইনে মোড়কের পরিবর্তে উপবৃত্ত দিয়ে ক্লিপ করবে। এটা কি সম্ভব?

আমি এটি চেষ্টা করেছি:

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

তবে white-space: nowrapমনে হচ্ছে পাঠ্যটি (এবং এর ঘর) অবিচ্ছিন্নভাবে ডানদিকে প্রসারিত করে টেবিলের মোট প্রস্থটিকে তার ধারকটির প্রস্থের বাইরে রেখে দেয়। এটি ব্যতীত, পাঠ্যটি যখন ঘরের প্রান্তে আঘাত করে তখন একাধিক লাইনে মোড়তে থাকে।

Comments

টেবিল কোষগুলি overflowভালভাবে পরিচালনা করে না । ঘরে একটি ডিভ স্থাপন এবং সেই ডিভকে স্টাইল করার চেষ্টা করুন।

— মিস্টার লিস্টার

Answer 1

উপবৃত্তের সাথে পাঠ্যকে ক্লিপ করতে যখন এটি কোনও টেবিল সেলে উপচে পড়ে যায়, কাজ করার জন্য আপনাকে ওভারফ্লোতে max-widthপ্রতিটি tdশ্রেণিতে সিএসএস সম্পত্তি সেট করতে হবে । কোন অতিরিক্ত বিন্যাস ডিভ প্রয়োজন হয়

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

প্রতিক্রিয়াশীল লেআউটগুলির জন্য; max-widthকলামটির কার্যকর ন্যূনতম প্রস্থ নির্দিষ্ট করতে CSS সম্পত্তি ব্যবহার করুন বা max-width: 0;সীমাহীন নমনীয়তার জন্য ব্যবহার করুন । এছাড়াও, অন্তর্ভুক্ত টেবিলটির একটি নির্দিষ্ট প্রস্থের প্রয়োজন হবে, সাধারণত width: 100%;এবং কলামগুলি সাধারণত তাদের প্রস্থের মোট প্রস্থের শতাংশ হিসাবে সেট করে have

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Orতিহাসিক: আইই 9-র জন্য (বা তারও কম) আপনার একটি এইচটিএমএল থাকা দরকার, একটি নির্দিষ্ট আই-নির্দিষ্ট রেন্ডারিং সমস্যা ঠিক করতে

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

Comments

আইই তে কাজ করার জন্য টেবিলটির প্রস্থও প্রয়োজন। jsfiddle.net/rBthS/69

— ট্রেভর ডিকসন

যদি আপনি সেট করেন width: 100%;এবং min-width: 1px;ঘরটি সর্বদা যথাসম্ভব প্রশস্ত হবে এবং যখন পাঠের প্রয়োজন হবে কেবল তখনই এলিপসিসটি ব্যবহার করবে (যখন উপাদানগুলির প্রস্থটি একটি নির্দিষ্ট আকারে আঘাত করবে তখন নয়) - এটি প্রতিক্রিয়াশীল বিন্যাসগুলির জন্য খুব কার্যকর।

— ডানকান ওয়াকার

@OzrenTkalcecKrznaric এটি কার্যকরভাবে কাজ করে display: table-cell, তবে যখন max-widthশতাংশটি শতাংশে (%) সংজ্ঞায়িত করা হয় তখন তা নয় । এফএফ 32

— গ্রেগ

(উপরোক্ত বিষয়গুলি অনুসরণ করে) আপনি যদি% মানগুলি ব্যবহার table-layout: fixedকরেন তবে কেবল সেই উপাদানটি ব্যবহার করে display: tableকৌশলটি সফল হবে

— গ্রেগ

আপনি কীভাবে বুটস্ট্র্যাপ প্রতিক্রিয়াশীল টেবিলের মতো প্রতিক্রিয়াশীল ফ্যাশনে কলামগুলির প্রস্থ স্বয়ংক্রিয়ভাবে নির্ধারিত করতে চান? সর্বাধিক প্রস্থ নির্ধারণ করা এতে প্রবেশ করবে। এখানে কি কাজ আছে?

— নেস্ট

Answer 2

একটি max-widthনির্দিষ্ট বা প্রস্থ নির্দিষ্ট করা সমস্ত পরিস্থিতিতে কাজ করে না, এবং টেবিলটি তরল হওয়া উচিত এবং এর ঘরগুলি স্বতঃ-স্থান হওয়া উচিত। টেবিলের জন্য এটিই।

এটি ব্যবহার করুন: http://jsfiddle.net/maruxa1j/

এইচটিএমএল:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

সিএসএস:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

আইই 9 এবং অন্যান্য ব্রাউজারগুলিতে কাজ করে।

Comments

দ্রষ্টব্য: এই দ্রবণটি <span>উপাদানগুলিতে কোষের সামগ্রী মোড়ানো করে।

— রায় টিঙ্কার

এটি সত্যিই চতুর সমাধান এবং আমি যে সমস্ত টেবিলগুলির জন্য একটি সমাধানের প্রয়োজন তার জন্য ভাল কাজ করে। তবে আপনি যদি টেবিলের সমস্ত ঘর একই প্রস্থে না চান তবে আপনাকে প্রস্থগুলি সেট করতে হবে।

— কেভিন বিয়াল

যখন কোনও নির্দিষ্ট প্রস্থ নেই, তখন এই সমাধানটি সবচেয়ে ভাল কাজ করে। সত্যিই খুব চালাক!

— এভিডেনিক

এই যেমন উল্লম্ব প্রান্তিককরণ রাখে যখন অন্যান্য সমাধান যেমন display: blockকরেনি

— j3ff

কেবল সর্বকালের সেরা সমাধান! খুব বুদ্ধিমান। তোমাকে অনেক ধন্যবাদ.

— ক্লাউনকডার

Answer 3

কেন এমন হয়?

W3.org এর এই বিভাগটি মনে হয় যে পাঠ্য-ওভারফ্লো কেবলমাত্র ব্লক উপাদানগুলিতে প্রযোজ্য :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDN একই কথা বলেন ।

এই jsfiddle আপনার কোড (কয়েকটি ডিবাগ পরিবর্তন সহ) রয়েছে, যা এটি এর divপরিবর্তে প্রয়োগ করা হয় যদি তা কার্যকর হয় td। এটিতে থাকা একমাত্র ব্লকের tdমধ্যে থাকা সামগ্রীর মোড়কটি দিয়ে আমি দ্রুত চিন্তা করতে পারি এটির একমাত্র কাজ ound divতবে এটি আমার কাছে "কুরুচিপূর্ণ" মার্কআপের মতো দেখাচ্ছে, তাই আমি আশা করছি যে অন্য কারওর থেকে ভাল সমাধান হবে। এটি পরীক্ষা করার কোডটি এর মতো দেখাচ্ছে:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Comments

সুন্দর ধন্যবাদ. আমি আমার মার্কআপ থেকে টেবিলের ঘরগুলি অপসারণ করতে পারিনি, সুতরাং পরিবর্তে আমি কেবল ডিভগুলিতে বিষয়বস্তু আবৃত করেছি (তাদের প্রস্থগুলি ঘরের প্রস্থে রেখেছি) এবং পরিবর্তে সেখানে ওভারফ্লো প্রয়োগ করেছি। মোহন মত কাজ!

— daGUY

Answer 4

আপনি যদি কোনও কিছুর জন্য প্রস্থ স্থির করতে চান না

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

আপনার সিএসএসে এই 3 টি বিধি যুক্ত করুন:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

যে কোনও টেবিল সেলে এইচটিএমএল ফর্ম্যাট করুন আপনি গতিশীল পাঠ্য ওভারফ্লো চান:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

min-widthটেবিল কক্ষে অতিরিক্তভাবে কাঙ্ক্ষিত (বা কিছুই নয়) প্রয়োগ করুন।

অবশ্যই বেহাল: https://jsfiddle.net/9wycg99v/23/

Comments

সর্বাধিক সহায়ক উত্তর, ডায়নামিক উপবৃত্ত মাত্র দুর্দান্ত।

— লুসিফার 63

এটি প্রতিটি কলামের নির্বাচিত প্রস্থ max-width: Xdisplay: flex

— সীমাটিকে বিভ্রান্ত

Answer 5

দেখে মনে হচ্ছে আপনি যদি উপাদানটিতে উল্লেখ table-layout: fixed;করেন tableতবে আপনার স্টাইলগুলি tdকার্যকর হওয়া উচিত। এটি কক্ষগুলি কীভাবে আকারযুক্ত তাও প্রভাব ফেলবে।

সিটপয়েন্টটি এখানে কিছুটা টেবিল-বিন্যাসের পদ্ধতিগুলি নিয়ে আলোচনা করেছে: http://references.sitepPoint.com/css/tableformatting

Comments

আপনি যখন সারণির প্রস্থ নির্দিষ্ট করতে চান না তখন এটি সঠিক উত্তর হওয়া উচিত।

— এডরিয়ান

Answer 6

আপনি যদি কেবল টেবিলটি স্বতঃ-বিন্যাসে চান

ব্যবহার না করে max-width, বা শতাংশ কলাম প্রস্থ, বা table-layout: fixedইত্যাদি।

https://jsfiddle.net/tturadqq/

কিভাবে এটা কাজ করে:

---

পদক্ষেপ 1: কেবল টেবিলটিকে স্বয়ংক্রিয় বিন্যাসটি এটি করতে দিন।

যখন অনেকগুলি পাঠ্য সহ এক বা একাধিক কলাম রয়েছে তখন এটি অন্যান্য কলামগুলিকে যথাসম্ভব সঙ্কুচিত করবে, তারপরে দীর্ঘ কলামগুলির পাঠ্যটি মোড়ানো হবে:

---

পদক্ষেপ 2: একটি ডিভাইসে ঘর সামগ্রী মোড়ানো, তারপরে সেই ডিভকে সেট করুন max-height: 1.1em

(অতিরিক্ত 0.1 মিমি এমন অক্ষরগুলির জন্য যা পাঠ্য বেসের নীচে কিছুটা রেন্ডার করে, যেমন 'জি' এবং 'ওয়াই' এর লেজের মতো)

---

পদক্ষেপ 3: titleডিভস সেট করুন

এটি অ্যাক্সেসযোগ্যতার জন্য ভাল, এবং আমরা যে মুহুর্তে সামান্য কৌশল ব্যবহার করব তার জন্য এটি প্রয়োজনীয়।

---

পদক্ষেপ 4: ডিভের ::afterউপর একটি সিএসএস যুক্ত করুন

এটি কৌতুকপূর্ণ বিট। আমরা একটি সিএসএস সেট করি ::afterযার সাথে content: attr(title)ডিভের উপরে অবস্থিত এবং সেট করুন text-overflow: ellipsis। আমি এটি পরিষ্কার করার জন্য এটি এখানে লাল রঙ করেছি।

(লম্বা কলামটিতে এখন একটি টেলিং উপবৃত্ত রয়েছে কী তা নোট করুন)

---

পদক্ষেপ 5: ডিভ পাঠ্যের রঙটি এতে সেট করুন transparent

এবং আমরা সম্পন্ন করেছি!

Comments

এটি দুর্দান্ত এবং নিখুঁত সমাধান! আমি অবাক হয়েছি কেন কেন এটি বেশিরভাগ উত্সের পরিবর্তে নেতিবাচক ভোট পেয়েছে !!

— জেন্ডু

অসাধারণ মানুষ! (@ ইউজার ৯645৫ - এটি সঠিক নয়: এটি ভ্যুজেজেএস-এর সাথে উপস্থাপিত একটি টেবিলের সাথে কাজ করুন - ডিডির উপর নয়, ডিভের উপর শিরোনামগুলি রাখার বিষয়ে নিশ্চিত হন)

— ক্রিশ্চিয়ান অপ্টিজ ২

@ ক্রিশ্চিয়ানঅপিটজ - হ্যাঁ আমি অবশ্যই এটিকে কোনওভাবেই গণ্ডগোল করে ফেলেছি ... এটি চেষ্টা করে দেখুন এবং এটি কাজ করছে।

— user9645

আমি লক্ষ্য করেছি যে টেবিলের ঘরের <a>পরিবর্তে ব্যবহার করার সময় এই পদ্ধতিটি ব্যর্থ হয় <div>। সংযোজন word-break: break-all;সমস্যা সমাধান করে। উদাহরণ: jsfiddle.net/de0bjmqv

— zendu

শুধু মহান. এবং আপনার কোষগুলিতে একই পাঠ্যও থাকতে হবে না (শিরোনামগুলি যথেষ্ট) এবং তারপরে আপনার সর্বোচ্চ উচ্চতা: 1.1 মিমি ইত্যাদির প্রয়োজন নেই - ডিভগুলির জন্য আপনার যা প্রয়োজন তা হ'ল অবস্থান: আপেক্ষিক;

— কেএস 74

Answer 7

যখন এটি শতাংশের টেবিল প্রস্থে থাকে, বা আপনি টেবিল ঘরে নির্দিষ্ট প্রস্থ সেট করতে পারবেন না। আপনি table-layout: fixed;এটি কাজ করতে আবেদন করতে পারেন ।

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Answer 8

একটি ফ্লেক্স ব্লকে কক্ষের সামগ্রী মোড়ানো। বোনাস হিসাবে, সেল অটো দৃশ্যমান প্রস্থে ফিট করে।

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

Comments

আমাকেও ক্লাসে যুক্ত white-space: nowrap;করতে হয়েছিল child।

— রস অ্যালেন

Answer 9

আমি সেলটির (আত্মীয়) অভ্যন্তরে একেবারে অবস্থানযুক্ত ডিভি ব্যবহার করে এটি সমাধান করেছি।

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

এটাই. তারপরে আপনি হয় একটি শীর্ষ যুক্ত করতে পারেন: ডিভের মান বা উল্লম্বভাবে এটি কেন্দ্র করতে পারেন:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

ডানদিকে কিছু জায়গা পেতে, আপনি সর্বোচ্চ-প্রস্থকে কিছুটা কমিয়ে আনতে পারেন।

Comments

এটি একটি জেএসফিডেলের সাথে দুর্দান্ত লাগবে, এই জনপ্রিয় প্রশ্নের অন্যান্য অনেক উত্তর answers

— ওমা

হ্যাঁ, এটি কাজ করে তবে ডিভের জন্য আমি কিছুটা আলাদা স্টাইল ব্যবহার করেছি: বাম: 0; শীর্ষ: 0; ডান: 0; নীচে: 0; প্যাডিং: 2px; সঠিক অবস্থান পেতে এবং টেবিলের কোষগুলির মতো একই প্যাডিং করতে।

— কেএস 74

Answer 10

এটি আমার ক্ষেত্রে, ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই কাজ করেছিল:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Answer 11

আইই 9 তে এটি সংস্করণ।

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>

Comments

একটি <বিভাজন> <টেবিল> এর সরাসরি শিশু হিসাবে? ঠিক মনে হচ্ছে না!

— মিচিয়েল

@ মিচিয়েল এফওয়াইআই - ব্রাউজারগুলি টেবিল ট্যাগের নিচে ডিভগুলি পরিচালনা করতে পারে।

— রায়ান ও'কনেল