<td> ট্যাগে মোড়ানো পাঠ্য


136

আমি এমন কিছু পাঠ্য মোড়তে চাই যা একটি <td>উপাদানে যুক্ত হয় । আমি চেষ্টা করেছি style="word-wrap: break-word;" width="15%"। তবে লেখাটি মোড়ানো হচ্ছে না। এটি কি 100% প্রস্থ দেওয়া বাধ্যতামূলক? প্রদর্শন করার জন্য আমার অন্যান্য নিয়ন্ত্রণ রয়েছে তাই কেবল 15% প্রস্থ উপলব্ধ।


1
আপনি কোন এইচটিএমএল ব্যবহার করছেন? এটি <td> কিছু পাঠ্য ... </td> বা আপনার টিডিতে একটি <p> বা <স্প্যান> রয়েছে? এছাড়াও যখন আপনি বলেন যে এটি মোড়ানো হয় না আমি অনুমান করি যে আপনি টেবিলের প্রস্থের "15%" এর চেয়ে বেশি লম্বায় টিডি প্রস্থে প্রসারণ করতে দেখছেন?
স্কানলিফ

আমার এইচটিএমএলটিতে <td> ডায়নামিক পাঠ্য রয়েছে td

উত্তর:


221

টিডি পাঠ্য মোড়ানো করতে

প্রথম সেট টেবিল শৈলী

table{
    table-layout: fixed;
}

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

td{
    word-wrap:break-word
}

5
আমি মনে করি এটি গ্রহণ করা হয়নি কারণ এটি ক্রোমে কাজ করে না ... :-( ওয়েবকিটের কোনও সমাধান?
মার্কো এস

4
ক্রোমে আমার জন্য পুরোপুরি কাজ করেছেন।
আলেজান্দ্রো রিডেল

17
আকর্ষণীয় ... ক্রোমে, আমাকে white-space: normalমোড়ানোর কাজটি (পরিবর্তে word-wrap:break-word) করার জন্য টিডি স্টাইল ব্যবহার করতে হয়েছিল
জিম

3
আমি নিশ্চিত করতে পারি যে জিমের উত্তরের সাথে আমারও একই অভিজ্ঞতা ছিল। কোনও কারণে ক্রোম কোনও প্রতিক্রিয়া জানায় নাwhite-space:normal;
পেট্রোসিমি

1
আপনার white-space: pre-wrapযদি সাদা স্থান সংরক্ষণের প্রয়োজন হয় তবে ব্যবহার করুন ।
eksl

47

এইচটিএমএল টেবিলগুলি একটি "টেবিল-বিন্যাস: স্থির" সিএসএস শৈলী সমর্থন করে যা ব্যবহারকারী এজেন্টকে তাদের সামগ্রীতে কলাম প্রস্থকে মানিয়ে নেওয়া থেকে বিরত করে। আপনি এটি ব্যবহার করতে চাইবেন।


7
আমি এই সমাধানটি চেষ্টা করেছি, তবে এটি ক্রোমে কাজ করছে বলে মনে হয় না। আমার একটি টেবিল রয়েছে যা একটি হাইপারলিংক দিয়ে গতিশীলভাবে পূর্ণ হচ্ছে যা ঘরের প্রস্থের দ্বিগুণ। 'টেবিল-বিন্যাস: স্থির' টেবিল প্রসারিত করে সমস্যাটি সমাধান করে, তবে পাঠ্যটি মোড়ানো হয় না; পরিবর্তে এটি পৃষ্ঠার ডানদিকে প্রসারিত অবিরত রয়েছে। আমি কিছু অনুপস্থিত করছি?
ভয়েড এবং

30

আমি বিশ্বাস করি আপনি টেবিলের 22 টি ধরা পড়েছেন। টেবিলগুলি একটি সারণী কাঠামোতে সামগ্রী মোড়ানোর জন্য দুর্দান্ত এবং তারা এতে থাকা সামগ্রীর প্রয়োজনীয়তা মেটাতে "স্ট্রেচিং" এর দুর্দান্ত কাজ করে।

ডিফল্টরূপে টেবিল কোষগুলি সামগ্রীতে ফিট করতে প্রসারিত করবে ... সুতরাং আপনার পাঠ্যটি এটি আরও প্রশস্ত করে তোলে।

কয়েকটি সমাধান আছে।

1.) আপনি টিডিতে সর্বাধিক প্রস্থ সেট করার চেষ্টা করতে পারেন।

<td style="max-width:150px;">

২) আপনি আপনার পাঠ্যটিকে একটি মোড়ানো উপাদানগুলিতে (উদাহরণস্বরূপ একটি স্প্যান) রাখার চেষ্টা করতে পারেন এবং এতে সীমাবদ্ধতা সেট করতে পারেন।

<td><span style="max-width:150px;">Hello World...</span></td>

আইই এর পুরানো সংস্করণগুলি ন্যূনতম / সর্বাধিক প্রস্থকে সমর্থন করে না তবে সচেতন হন।

যেহেতু IE স্থানীয়ভাবে সর্বাধিক প্রস্থকে সমর্থন করে না আপনি জোর করতে চাইলে আপনাকে একটি হ্যাক যুক্ত করতে হবে। হ্যাক যুক্ত করার বিভিন্ন উপায় রয়েছে, এটি কেবল একটি।

পৃষ্ঠা লোডে, কেবলমাত্র আইআই for এর জন্য, সারণীর রেন্ডার প্রস্থটি (পিক্সেলগুলিতে) পান তার পরে 15% এবং পিক্সেলগুলিতে that কলামে প্রথম টিডির প্রস্থ হিসাবে (বা আপনার শিরোনাম থাকলে) আবার প্রয়োগ করুন ।


আমি উভয় উপায়ে আছে। তবে পাঠ্যটি মোড়ানো করতে পারছি না। আমি IE6.0

1
আহ, আই 6 এটি জটিলতা যুক্ত করে। আমি আইই 6 হ্যাক দিয়ে আমার উত্তরটি সংশোধন করব।
স্কানলিফ

11

table-layout:fixedপ্রসারিত ঘরের সমস্যা সমাধান করবে, তবে একটি নতুন তৈরি করবে। ডিফল্টরূপে IE ওভারফ্লো লুকিয়ে রাখবে তবে মজিলা এটিকে বাক্সের বাইরে রেন্ডার করবে।

আরেকটি সমাধান ব্যবহার করা হবে: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>


9

এটি কিছু সিএসএস ফ্রেমওয়ার্ক (উপাদান ডিজাইনের লাইট [এমডিএল]) নিয়ে আমার পক্ষে কাজ করেছে।

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

8

ব্যবহার word-breakএটা styling ছাড়া ব্যবহার করা যেতে পারে tableথেকেtable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}
<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>


3

এটি সত্যই ভাল কাজ করে:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

আপনি আপনার সকলের জন্য একই প্রস্থ ব্যবহার করতে পারেন <div, বা আপনার পাঠ্য যেখানেই চান ভাঙতে প্রতিটি ক্ষেত্রে প্রস্থ সামঞ্জস্য করতে পারেন।

এইভাবে আপনাকে নির্দিষ্ট টেবিল প্রস্থ বা জটিল সিএসএসের সাহায্যে বোকা বানাতে হবে না।


1
পরিবর্তে আপনি সিএসএস ব্যবহার করতে চেয়েছিলেন, তবে আধুনিক এইচটিএমএলগুলিতে সাধারণত ইনলাইন শৈলীগুলি এড়ানো হয়, বিশেষত যদি আপনি প্রতি অনুলিপি ডিভের জন্য একই স্টাইলগুলি বারবার বারবার করছেন।
ট্যাঙ্কোরস্যামশ

3

আমার tdসাথে আমার কিছু এস ছিল:

white-space: pre;

এটি আমার জন্য এটি সমাধান করেছে:

white-space: pre-wrap;

2

পাঠ্যের দীর্ঘতম শব্দের মতো কক্ষের প্রস্থকে হুবহু করতে, কেবলমাত্র ঘরের প্রস্থটি সেট করুন 1px

অর্থাত

td {
  width: 1px;
}

এটি পরীক্ষামূলক এবং আমি পরীক্ষা এবং ত্রুটি করার সময় এটি সম্পর্কে জানতে পারি

লাইভ ফ্রেড: http://jsfiddle.net/harshjv/5e2oLL8L/2/


1

এটি সম্ভবত এটি কার্যকর হতে পারে তবে এটি ভবিষ্যতে কোনও মুহুর্তে (অবিলম্বে না হলে) কিছুটা উপদ্রব হিসাবে প্রমাণিত হতে পারে।

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

এর যুক্তিটি spanহ'ল, অন্যদের দ্বারা নির্দেশিত হিসাবে, একটি <td>সাধারণত বিষয়বস্তুগুলিকে সামঞ্জস্য করার জন্য প্রসারিত হবে, যেখানে একটি <span>দেওয়া যেতে পারে এবং আশা করা যায় - একটি সেট প্রস্থ; এর overflow: hiddenউদ্দেশ্য, তবে তা লুকিয়ে রাখতে পারে না অন্যথায় এর কারণ কী<td> প্রসারিত করতে।

আমি titleভিজ্যুয়াল সেলে উপস্থিত (বা ক্লিপড) উপস্থিত টেক্সটটি দেখানোর জন্য স্প্যানের সম্পত্তিটি ব্যবহার করার পরামর্শ দেব , যাতে পাঠ্যটি এখনও উপলভ্য থাকে (এবং যদি আপনি এটি চান না / লোকেরা এটি দেখার প্রয়োজন হয় তবে কেন এটি আছে) প্রথম স্থানে, আমার ধারণা ...)।

এছাড়াও, আপনি যদি টিডিটির জন্য কোনও প্রস্থকে সংজ্ঞায়িত করেন td {...}তবে এর প্রস্থিত প্রস্থটি পূরণ করার জন্য (বা সম্ভাব্যভাবে চুক্তি করা হবে, তবে আমি সন্দেহ করি) তবে এটি দেখতে যেমন মনে হচ্ছেtable-width/number-of-cells একটি নির্দিষ্ট টেবিল-প্রস্থ তৈরি বলে মনে হচ্ছে না একই সমস্যা।

ডাউনসাইড হ'ল উপস্থাপনার জন্য ব্যবহৃত অতিরিক্ত মার্কআপ।


1

আসলে পাঠ্য মোড়ানো টেবিলে স্বয়ংক্রিয়ভাবে ঘটে। পরীক্ষার সময় যে ভুলকারীরা প্রতিশ্রুতিবদ্ধ তা হ'ল হাইপোথিটিক্যালি "ggggggggggggggggggggggggggggggggggggggggggggggggg" এর মতো একটি দীর্ঘ স্ট্রিং ধরে নেওয়া এবং অভিযোগ করা যে এটি মোড়ানো হয় না। ব্যবহারিকভাবে ইংরেজিতে কোনও শব্দ নেই যা এটি দীর্ঘ এবং এমনকি যদি থাকে তবে একটি অজ্ঞান হওয়ার সম্ভাবনা রয়েছে যে এটি এর মধ্যেই ব্যবহৃত হবে <td>

"কাউন্টারপজিশন পূর্বনির্ধারিত পরিস্থিতিতে কুসংস্কারজনক" এর মতো বাক্য দিয়ে পরীক্ষা করে দেখুন।


এটা সঠিক। লোকেরা কেন "হোয়াইট-স্পেস: নওর্যাপ" ব্যবহার করার পরামর্শ দিচ্ছে তা বুঝতে পারছি না কারণ এটি ওপি যা চায় তার বিপরীতে করবে।
mluisbrown

29
ইংরেজিতে কোনও শব্দ সংশোধন করুন না এটি দীর্ঘ but তবে মনে করুন আমি একটি ফাইলপথ প্রদর্শন করছি, এটি ধারাবাহিক এবং খুব দীর্ঘ হতে চলেছে।
ক্রিপ

2
.. অথবা সংখ্যার একটি দীর্ঘ কমা বিচ্ছিন্ন তালিকার জন্য যা দুর্ভাগ্যক্রমে কোনও স্পেস নেই বলে ঘটে।
আদিত্য সংঘ

4
.. অথবা একটি দীর্ঘ ডোমেইননাম যা 63৩ টি অক্ষরে যেতে পারে (এক্সটেনশন এবং www বাদ) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
ব্রেইনফিডার

আমি যখন "শব্দ" একটি খুব দীর্ঘ url তখন এই সমস্যাটি সমাধান করার চেষ্টা করছি। "Ggggggggggggggggggggggggggggggggggggggggggggggggg" উদাহরণ সহ উপরের মন্তব্যটি দীর্ঘ urls বিবেচনায় নিচ্ছে না।
geekandglitter

0

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

আমি বিশ্বাস করি যে ওপি, স্পষ্টভাবে তা না জানিয়ে, ফাঁকবিহীন গতিশীল বিষয়বস্তু মোড়ানো নিয়ে সমস্যা রয়েছে। এই ক্ষেত্রে, উপরের সমাধানটি কাজ করবে না - jsfiddle.net/qZrFW
user66001

-1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.