সিএসএস উপবৃত্তাকার টেবিল সেল কেন কাজ করে না?

Question

নিম্নলিখিত উদাহরণ বিবেচনা করুন: ( এখানে লাইভ ডেমো )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

আউটপুটটি হ'ল: width = 139এবং উপবৃত্ত উপস্থিত হয় না।

আমি এখানে কি মিস করছি?

Comments

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

— BoltClock

একরকম সদৃশ, তবে উত্তরটি কোনও কাজের সমাধান দেয় না (যেমন অ্যারলেন কুস করেন)।

— ফ্লোরিয়ান মার্জাইন

widthএবং heightটেবিলের ঘরে সর্বদা সর্বনিম্ন প্রস্থ এবং উচ্চতা হিসাবে ব্যবহৃত হয় । টেবিল সেল আলাদা!

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

@ ফ্লোরিয়ানমারগেইন আসলে, অন্য প্রশ্নটি কার্যকারিতা দেয়: কাঙ্ক্ষিত প্রস্থের সাথে একটি ডিভিশন রাখুন।

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

আমি এখনও এই পৃষ্ঠায় তালিকাভুক্ত উত্তরগুলি পছন্দ করি।

— ফ্লোরিয়ান মার্জাইন

Answer 1

স্পষ্টতই যোগ করা:

td {
  display: block; /* or inline-block */
}

সমস্যাটিও সমাধান করে।

---

আর একটি সম্ভাব্য সমাধান হ'ল table-layout: fixed;টেবিলের জন্য সেট করুন এবং এটিও সেট করুন width। উদাহরণস্বরূপ: http://jsfiddle.net/fd3Zx/5/

Comments

যথাযথভাবে। সঙ্গে উপাদানসমূহ display: table-cell(ডিফল্ট tdউপাদান) একটি প্রস্থ স্বীকার করছি না।

— মাইকেল মায়ার

display: block;ধরণের একটি টেবিল ব্যবহারের উদ্দেশ্যকে পরাস্ত করে। আমি table-layout: fixed;বিকল্পটি পছন্দ করি, এটি আমার পক্ষে ভাল কাজ করেছে।

— অ্যালেক্স কে

table-layout:fixedকম স্মার্ট উপায়ে কলামগুলির প্রস্থ বিতরণ করে। এমন কি আরও একটি বিকল্প রয়েছে যা কলামের প্রস্থকে একইভাবে নির্ধারণ করবে table-layout: normalএবং এখনও উপবৃত্তটি সঠিকভাবে প্রদর্শন করবে?

— নেস্ট

টেবিলের সীমানা সহ এই স্ক্রুগুলি; সর্বাধিক প্রস্থ ব্যবহার করে না।

— চার্লি

Answer 2

এটি রাখাও গুরুত্বপূর্ণ

table-layout:fixed;

সমন্বিত টেবিলের মধ্যে, সুতরাং এটি আই 9 তেও ভাল পরিচালনা করে (যদি আপনি সর্বোচ্চ সীমা ব্যবহার করেন)।

Comments

এটিও নিশ্চিত করবে যে পাঠ্য ওভারফ্লো প্রতিক্রিয়াশীল

— লেআউটে

এটাই আমার দরকার ছিল। আমার টেবিলের প্রস্থ 100%। এবং একটি নির্দিষ্ট প্রস্থের সাথে এক বাদে সমস্ত কলাম। এটি শেষ কলামটি যতটুকু জায়গা বাকি রয়েছে তা নিতে পারে।

— ম্যাথেজো 1460

Answer 3

আগেই বলা হয়েছে, আপনি ব্যবহার করতে পারেন td { display: block; }তবে এটি একটি টেবিল ব্যবহারের উদ্দেশ্যকে পরাস্ত করে।

আপনি ব্যবহার করতে পারেন table { table-layout: fixed; }তবে সম্ভবত আপনি এটি কিছু কলমের জন্য আলাদা আচরণ করতে চান।

সুতরাং আপনি যা চান তা অর্জনের সর্বোত্তম উপায় হ'ল আপনার পাঠ্যটি একটিতে মোড়ানো <div>এবং এটির <div>(আপনার কাছে নয় <td>) আপনার সিএসএস প্রয়োগ করা :

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Comments

এটি আমি দেখতে পেয়েছি সবচেয়ে সহজ পদ্ধতি এবং এটি আসলে IE8 এ কাজ করে।

— কিথ কেটেরের

সারণীতে আলিপসিসে আমি দেখেছি এটি সেরা সমাধান।

— membersound

Answer 4

max-widthপরিবর্তে ব্যবহার করার চেষ্টা করুন width, টেবিলটি স্বয়ংক্রিয়ভাবে প্রস্থটি গণনা করবে।

এমনকি ie11(ie8 সামঞ্জস্য মোড সহ) কাজ করে।

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle ।

Comments

ভাল বিক্ষোভ. এটি উভয়ই ব্যবহার করা ভাল , যাতে উপাদানটি একটি নির্দিষ্ট প্রস্থ হয়। অন্যথায় বিষয়বস্তু যদি এটির অনুমতি দেয় তবে এটি ছোট হতে পারে।

— এলসার্নি

ডিসপ্লে হ্যাকের চেয়ে ওয়ে ভাল; টেবিলের সীমানা সহ ডিসপ্লেচ্যাক স্ক্রু।

— চার্লি

Answer 5

ডেমো পৃষ্ঠা

গতিশীল প্রস্থ সহ টেবিলগুলির জন্য, আমি সন্তোষজনক ফলাফল আনার নীচের উপায়টি পেয়েছি। <th>ছাঁটাই-পাঠ্য দক্ষতার জন্য প্রত্যেকটিরই অভ্যন্তরীণ মোড়ানো উপাদান থাকা উচিত যা কাজের <th>অনুমতি text-overflowদেওয়ার বিষয়বস্তুগুলিকে আবৃত করে ।

আসল কৌতুকটি ইউনিটগুলিতেmax-width (উপর <th>) সেট করা ।vw

এটি কার্যকরভাবে উপাদানটির প্রস্থকে ভিউপোর্টের প্রস্থে (ব্রাউজার উইন্ডো) "আবদ্ধ" করতে সক্ষম করবে এবং এর ফলে একটি প্রতিক্রিয়াশীল সামগ্রী ক্লিপিংয়ের ফলাফল হবে। vwপ্রয়োজনীয় এক সন্তোষজনক মান সেট করুন ।

নূন্যতম সিএসএস:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

---

এখানে একটি চলমান ডেমো:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Answer 6

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

সুতরাং শেষ পর্যন্ত আমি যা করেছি তা হ'ল:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

সুতরাং মূলত ulহয় table, liহয় trএবং spanহয় td।

তারপরে সিএসএসে আমি spanউপাদানগুলি সেট করে রেখেছি display:block;এবং float:left;(আই- inline-blockএর পুরানো সংস্করণগুলিতে এটি কাজ করবে বলে আমি এই সংমিশ্রণটি পছন্দ করি , ভাসমান প্রভাবটি সাফ করতে দেখুন: http://css-tricks.com/snippets/css/clear- ঠিক করুন / ) এবং উপবৃত্তগুলিও রাখুন:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

তারপরে আপনি যা কিছু করেন তা max-widthsআপনার স্প্যানগুলির সেট করে দেয় এবং এটি তালিকাটিকে একটি টেবিলের উপস্থিতি দেয়।

Comments

আপনি কি টিডি এর ভিতরে উল প্রয়োগ করতে পারেন (যেমন? <td><ul>...</ul></td>)? এটি আমার পক্ষে কাজ করে বলে মনে হচ্ছে না :(

— স্যাম

Answer 7

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

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

এটি কোনও পাঠ্য ক্ষেত্রের মতো দেখায় তবে হাইলাইট-সক্ষম তাই আরও বেশি ব্যবহারকারী বান্ধব

Comments

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

— কার্লো

ওএমজি, এতো চালাক! যেহেতু এটি টেবিলের অংশ তাই কেবল স্বচ্ছ পটভূমি সহ সীমাহীন হিসাবে ইনপুটটি সেট করুন। আমি এই সমাধান ভালোবাসি!

— স্যাম

Answer 8

box-sizingআপনার tdউপাদানগুলির CSS সম্পত্তি পরীক্ষা করুন । সিএসএস টেমপ্লেট নিয়ে আমার সমস্যা হয়েছিল যা এটির border-boxমান সেট করে । আপনি সেট প্রয়োজন box-sizing: content-box।

Answer 9

আপনার টেবিলগুলি যেমন রয়েছে তেমন ছেড়ে দিন। কেবল কাটানো সিএসএস লাগানো স্প্যানের সাহায্যে টিডির ভিতরে থাকা সামগ্রীটি মোড়ানো।

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Comments

আমি এটি চেষ্টা করেছি, এটি ডেটাবেলসনেটনে কাজ করে না। কোন ধারণা?

— স্যাম

Answer 10

আপনি যদি সর্বোচ্চ-প্রস্থকে টিডিতে সেট করতে না চান (যেমন এই উত্তরের মতো ), আপনি সর্বাধিক প্রস্থটি ডিভিতে সেট করতে পারেন:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

দ্রষ্টব্য: 100% কাজ করে না, তবে 99% এফএফের কৌশলটি করে। অন্যান্য আধুনিক ব্রাউজারগুলিকে মূর্খ ডিভ হ্যাকের দরকার নেই।

td
  সীমানা: 1px কঠিন কালো;
    প্যাডিং-বাম: 5px;
    প্যাডিং-ডান: 5px;
}
TD> DIV আছে {
    সর্বাধিক প্রস্থ: 99%;
    যথোপযুক্ত সৃষ্টিকর্তাযথোপযুক্ত সৃষ্টিকর্তা;
    পাঠ্য-ওভারফ্লো: উপবৃত্ত;
    সাদা-স্থান: এখনই;

}