এইচটিএমএল টেবিলের মধ্যে ওয়ার্ড-মোড়ানো

Question

আমি word-wrap: break-wordএবং divএর মধ্যে পাঠ্য মোড়ানো ব্যবহার করছিspan এস । তবে এটি টেবিল কোষগুলিতে কাজ করবে বলে মনে হয় না। আমার width:100%এক সারি এবং দুটি কলাম সহ একটি সারণী সেট আছে । উপরের সাথে স্টাইলযুক্ত কলামগুলিতে পাঠ্য word-wrapমোড়ানো হয় না। এটি পাঠ্যের ঘরের সীমানা পেরিয়ে যাওয়ার কারণ ঘটায়। এটি ফায়ারফক্স, গুগল ক্রোম এবং ইন্টারনেট এক্সপ্লোরারে ঘটে।

উত্সটি কেমন দেখাচ্ছে তা এখানে:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

উপরের লম্বা শব্দটি আমার পৃষ্ঠার সীমানার চেয়ে বড় তবে এটি উপরের এইচটিএমএলটির সাথে ভেঙে যায় না। আমি যোগ করার নীচের পরামর্শগুলি চেষ্টা করেছি text-wrap:suppressএবং text-wrap:normal, কিন্তু কোনওরকম সাহায্য করি নি।

Comments

হার্ড হাইফেন যোগ করুন। <tr> <td শৈলী = "পাঠ্য-মোড়ানো: সাধারণ; শব্দ-মোড়ানো: ব্রেক-শব্দ"> এটি পূর্ব-প্রেরণ। </td> </tr>

— অ্যাডটাপস্ট

দুর্ভাগ্যক্রমে, সেখানে লেখাটি ব্যবহারকারী-উত্পাদিত সামগ্রী থেকে এসেছে। অবশ্যই, আমি এটির প্রাক-প্রক্রিয়া করতে এবং হাইফেন যুক্ত করতে পারি, তবে আমি আশা করছিলাম এর থেকে আরও ভাল উপায় হবে।

— সাইকোটিক

'হার্ড-হাইফেন' শব্দটি ব্যবহার করার জন্য আমি ক্ষমা চেয়ে নিচ্ছি। এইচটিএমএলে, সরল হাইফেন "-" অক্ষর দ্বারা উপস্থাপিত হয় (& # 452 বা & # x2D;)। নরম হাইফেন চরিত্রের সত্তা রেফারেন্স দ্বারা উপস্থাপিত হয় & লাজুক; (& # 173; বা & # xAD;)

— অ্যাডটাপোস্ট

আপনি কি সত্যিই <code> ব্রেক ব্রেক- ওয়ার </ em> কে </ em> </code> ব্যবহার করছেন? এটির সাথে এটির কিছু থাকতে পারে।

— Ms2ger

আপনি যদি এখানে থাকেন তবে আপনি white-space: pre-wrap বিকাশকারী.মোজিলা.আর.ইন.ইউএস

— টম প্রটস

Answer 1

নিম্নলিখিতটি ইন্টারনেট এক্সপ্লোরারে আমার জন্য কাজ করে। table-layout:fixedসিএসএস অ্যাট্রিবিউট সংযোজন নোট করুন

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

Comments

@ অওম্যাক হ্যাঁ, মাঝে মধ্যে আমাকে এইচটিএমএল / সিএসএস সম্পর্কে ভিএস 2010 ত্রুটিগুলি উপেক্ষা করতে হবে যদি আমি জানতাম যে এটি ব্রাউজারে কাজ করবে।

— মার্ক স্টোবার

@marc !! বাবু, এই জন্য অনেক ধন্যবাদ। টেবিল ব্যবহার করে এমন ক্লায়েন্ট সাইটের একটি মোবাইল সংস্করণ তৈরি করার দায়িত্ব আমার ছিল, এবং এটি কাজ করতে আমার সমস্যা হয়েছিল! টেবিল-বিন্যাস: স্থির করেছে কৌতুক!

— ডিবাগ

এটি অন্যান্য কলামগুলিকে অনেক প্রশস্ত করে তোলে।

— ক্লিমেট

নিশ্চিত হয়ে পড়ুন বিকাশকারী.মোজিলা.আর.এন- ইউএস / ডকস / ওয়েবে / সিএসএস / টেবিল-লেআউট টেবিল এবং কলামের প্রস্থগুলি টেবিল এবং কোল উপাদানগুলির প্রস্থ বা কোষের প্রথম সারির প্রস্থের দ্বারা সেট করা হয়। পরবর্তী সারিতে থাকা ঘরগুলি কলামের প্রস্থকে প্রভাবিত করে না। এর মতো শব্দগুলি পারফরম্যান্সের জন্যও ভাল।

— স্যাম বার্নুম

@ ক্লিটমেন্ট নীচে ইন্দ্রেকের উত্তর দেখুন <colgroup>, এটি আমার জন্য এটি স্থির করেছে।

— অ্যান্ড্রুটবার

Answer 2

<td style="word-break:break-all;">longtextwithoutspace</td>

অথবা

<span style="word-break:break-all;">longtextwithoutspace</span>

Comments

প্রতীকের দৃষ্টিভঙ্গি আইওএস (আইফোন) এর সাফারিতেও কাজ করে তা নিশ্চিত করতে পারে।

— আকুলাস

কিছু সংক্ষিপ্ত এবং কিছু দীর্ঘ শব্দ দিয়ে সমস্যার সমাধানের জন্য, আপনি সম্ভাব্যভাবে পাঠটিকে প্রস্রোস করতে পারেন এবং কেবলমাত্র দীর্ঘ শব্দ (বলুন,> 40 অক্ষর) মোড়ানো করতে পারেন <span>।

— উত্তর

এটি ফায়ারফক্স, অপেরা

— মেটিডিমিডিয়া

এটি অ-শব্দের চরিত্রগুলিতে অগ্রাধিকার পায় না (যেমন, আমি যদি ফাঁকা ফাঁকে পৃথক পৃথক সংক্ষিপ্ত শব্দের শব্দ ব্যবহার করি তবে এটি সর্বদা শব্দগুলি ডানদিকে ডানদিকে চালিত করে, তারপর শেষ শব্দটি অর্ধেক ভাঙে)। Word-wrapকেবল যখন প্রয়োজন হবে তখন শব্দগুলি ভেঙে ফেলবে

— হাশব্রাউন

এই পদ্ধতির ভাল কারণ প্রয়োজন হয় না table-layout: fixed;।

— দুরত্ব

Answer 3

একটি দীর্ঘ শট, তবে ফায়ারব্যাগের (বা অনুরূপ) সাথে ডাবল-চেক করুন যে আপনি দুর্ঘটনাক্রমে নিম্নলিখিত নিয়মটি উত্তরাধিকারসূত্রে নিচ্ছেন না:

white-space:nowrap;

এটি আপনার নির্দিষ্ট লাইন বিরতি আচরণকে ওভাররাইড করতে পারে।

Comments

এই যা উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছিল এবং আমার জন্য শব্দ মোড়ানো শব্দটি ভেঙে দিয়েছিল

— shane lee

@ রিকগ্রান্দি আপনার যদি সমস্যা থাকে তবে আপনি এটিতে কী পরিবর্তন করবেন?

— কুকুটেড

@ কোকডেউড আমি এখানে অনেক দেরি করেছি, তবে এটিwhite-space:normal;

— বিয়ার মি

Answer 4

দেখা যাচ্ছে এটি করার কোনও ভাল উপায় নেই। সবচেয়ে কাছাকাছি আমি এসেছি "ওভারফ্লো: লুকানো;" টেবিলের চারপাশে ডিভাইসে এবং পাঠ্যটি হারাতে। আসল সমাধানটি যদিও টেবিলটি খনন করে। ডিভ এবং আপেক্ষিক অবস্থান ব্যবহার করে আমি একই প্রভাব অর্জন করতে পেরেছিলাম, এর উত্তরাধিকার বিয়োগ করে<table>

2015 আপডেট: এটি আমার মত যারা এই উত্তর চান তাদের জন্য। 6 বছর পরে, এটি সমস্ত অবদানকারীদের ধন্যবাদ, এটি কাজ করে।

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Answer 5

উল্লিখিত হিসাবে, পাঠ্য divপ্রায় কাজ মধ্যে স্থাপন করা । আপনি কেবল widthএর মধ্যে নির্দিষ্ট করতে হবেdiv যা লেআউট যা স্ট্যাটিক হয় সৌভাগ্যবান হয়।

এটি এফএফ 3.6, আইই 8, ক্রোমে কাজ করে।

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Comments

পুরো ঘরটি গ্রহণ করে তা নিশ্চিত করতে আপনি min-width: 100%বরাবর যোগ করতে পারেন । widthdiv

— ব্যবহারকারী 1091949

আমি কমা (,) দিয়ে ওয়ার্ড র‌্যাপ করতে চাই। লাইক Long,Long,Long,Long,Long। আমি কোনও কমা (,) এর পরে এটিকে মোড়াতে চাই।

— কার্তিকেইয়ান

Answer 6

ওভারফ্লো-মোড়ানো ব্যবহার করে এবং সাধারণ টেবিল বিন্যাস + টেবিল প্রস্থ 100% দিয়ে সূক্ষ্মভাবে কাজ করে এমন ওয়ার্কআউন্ড

https://jsfiddle.net/krf0v6pw/

এইচটিএমএল

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

সিএসএস

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

উপকারিতা:

• overflow-wrap:break-wordপরিবর্তে ব্যবহার করেword-break:break-all । কোনটি ভাল কারণ এটি প্রথমে স্পেসে ভাঙ্গার চেষ্টা করে এবং শব্দটি কেবল তার পাত্রে রাখার চেয়ে বড় হলে শব্দটি কেটে দেয়।
• table-layout:fixedদরকার নেই । আপনার নিয়মিত অটো-সাইজিং ব্যবহার করুন।
• পিক্সেলগুলিতে স্থির widthবা স্থির সংজ্ঞা দেওয়ার দরকার নেই max-width। %প্রয়োজনে পিতামাতার সংজ্ঞা দিন ।

FF57, ক্রোম 62, আই 11, সাফারি 11 এ পরীক্ষিত

Comments

যদিও এই হ্যাকটি আসলে সমস্ত ব্রাউজারে কাজ করছে বলে মনে হচ্ছে, সিএসএস স্পেস এর কোনও গ্যারান্টি সরবরাহ করে না। প্রতি w3.org/TR/CSS21/visudet.html#propdef-max-width , "টেবিল, ইনলাইন টেবিল, টেবিল ঘর, টেবিল কলাম এবং কলামের গোষ্ঠীতে ' মিনিম প্রস্থ' এবং 'সর্বাধিক প্রস্থের' প্রভাব অপরিবর্তিত " ।

— মার্ক

Answer 7

আপনার কোড পরিবর্তন করুন

word-wrap: break-word;

প্রতি

word-break:break-all;

উদাহরণ

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Comments

-1; এটি ব্রাউজারটিকে শব্দের বিরতি সম্পূর্ণরূপে উপেক্ষা করে শব্দের মাঝামাঝি বিভক্ত করে তোলে যদিও এটির প্রয়োজন নেই। এটি খুব কমই পছন্দসই আচরণ এবং সম্ভবত ওপি যে আচরণটি চায় তা নয়, অন্যথায় তারা break-wordপ্রথমে ব্যবহার করত না।

— মার্ক

Answer 8

সঙ্গে সমস্যা

<td style="word-break:break-all;">longtextwithoutspace</td>

পাঠ্যের কিছু ফাঁকা স্থান যেমন থাকে তখন এটি এতটা ভাল কাজ করে না

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

শব্দটি andthenlongerwithoutspacesযদি এক লাইনে টেবিল কক্ষের সাথে ফিট করে তবে long text with andthenlongerwithoutspacesএটি না করে, দীর্ঘ শব্দটি মোড়ানো না হয়ে দুটি ভাগে বিভক্ত হবে।

বিকল্প সমাধান: প্রতিটি দীর্ঘ শব্দের পরে U + 200B ( ZWSP ), U + 00AD ( নরম হাইফেন ) বা U + 200C ( ZWNJ ) লিখুন, 20 তম অক্ষর (তবে নীচে সতর্কতা দেখুন):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

সতর্কতা : অতিরিক্ত, শূন্য-দৈর্ঘ্যের অক্ষর serোকানো পঠনকে প্রভাবিত করে না। তবে এটি ক্লিপবোর্ডে অনুলিপি করা পাঠ্যকে প্রভাবিত করে (এই অক্ষরগুলি অবশ্যই অনুলিপি করা হয়)। ক্লিপবোর্ডের পাঠ্যটি যদি পরে ওয়েব অ্যাপ্লিকেশনে কিছু অনুসন্ধান ফাংশনে ব্যবহৃত হয় ... সন্ধান ভাঙ্গা হতে চলেছে। যদিও এই সমাধানটি বেশ কয়েকটি সুপরিচিত ওয়েব অ্যাপ্লিকেশনগুলিতে দেখা যায়, তবে সম্ভব হলে এড়িয়ে চলুন।

সতর্কতা : অতিরিক্ত অক্ষর serোকানোর সময়, আপনার গ্রাফেমির মধ্যে একাধিক কোড পয়েন্ট আলাদা করা উচিত নয়। আরও তথ্যের জন্য https://unicode.org/report/tr29/# গ্রাফেম_ক্লাস্টার_সীমা দেখুন ।

Comments

পর্যাপ্ত দীর্ঘ কথায়, আপনি যদি পরে একটি নরম হাইফেন sertোকান তবে সম্ভবত এর থেকে আউটপুটটি কিছুটা ভাল প্রতিটি চরিত্রের , যাতে ব্রাউজারটি নির্ভরযোগ্য উপাদানটি যুক্ত উপাদানটির ডানদিকের প্রান্তে শব্দটি ভাঙ্গতে পারে।

— মার্ক

যদিও এটি একটি কার্যকর সমাধান, আপাতদৃষ্টিতে অসম্পূর্ণ পরামর্শ কিছু যোগ করার "প্রত্যেকের পরে, বলুন, 20 তম অক্ষর" ফাঁদে পূর্ণ হবে যদি আপনি এটি আপনার সার্ভারে প্রোগ্রামগতভাবে করতে চান। চরিত্রগুলির উপর আইট্রেট করাবেশিরভাগ প্রোগ্রামিং ভাষায় একটি ইউনিকোড স্ট্রিংয়ের কঠিন। এ শ্রেষ্ঠ , একটি ভাষা এটা সহজ ইউনিকোড কোড পয়েন্ট পুনরুক্তি করতে পারে, কিন্তু যারা অগত্যা কী আমরা "অক্ষর" (যেমন হিসাবে পড়ুন চাই চাই éদুই কোড পয়েন্ট হিসেবে লেখা যেতে পারে)। আমরা সম্ভবত সত্যিকার অর্থে "গ্রাফিম" বলি, তবে আমি এমন কোন ভাষা জানি না যা এগুলির লুপকে তুচ্ছ করে তোলে।

— মার্ক

@ মার্কআমেরি আপনি ঠিক বলেছেন যাইহোক, এমনকি সরল ASCII সহ এটি দুর্দান্ত নয়। আমি "সতর্কতা" যুক্ত করেছি।

— পাইওটার ফাইন্ডেইসেন

Answer 9

এই ডেমো পরীক্ষা করে দেখুন

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

এখানে লিঙ্কটি পড়তে হবে

Comments

-1; ব্যবহার break-allব্রাউজার কারণ সম্পূর্ণরূপে শব্দ বিরতি উপেক্ষা করার যখন যেখানে প্রভাব যে এমনকি যদি আপনার সেল কোনো খুব দীর্ঘ শব্দ ছাড়া স্বাভাবিক গদ্য রয়েছে, আপনি শব্দের মাঝখানে লাইন ব্রেক দিয়ে শেষ করব সঙ্গে, লাইন ব্রেক করা করার সিদ্ধান্ত নেওয়ার হবে। এটি সাধারণত অনাকাঙ্ক্ষিত।

— মার্ক

Answer 10

আইই 8 এবং Chrome 13 এ পরীক্ষিত।

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

এটি পৃষ্ঠার প্রস্থ এবং প্রতিটি কলামের প্রস্থের 50% প্রশস্ত করতে টেবিলটিকে সজ্জিত করে।

আপনি পৃষ্ঠার আরো নেওয়া প্রথম কলামটি পছন্দ করেন, একটি যোগ width: 80%করতে tdনিম্নলিখিত উদাহরণ হিসাবে, আপনার পছন্দ শতাংশ সঙ্গে 80% প্রতিস্থাপন।

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Answer 11

আপনি যে লেআউটটি অর্জন করতে চান তার উপর নির্ভর করে কেবলমাত্র যে কাজটি করা দরকার তা হ'ল প্রস্থ <td>বা <div>অভ্যন্তরের প্রস্থ যুক্ত করুন <td>।

উদাহরণ:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

অথবা

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Comments

এটি মূলত কেবল কোনও নতুন তথ্য বা অন্তর্দৃষ্টি যুক্ত না করে কয়েক মাস আগে লাউঞ্জারডকের উত্তরটি কী বলেছিল তা পুনরাবৃত্তি করে।

— মার্ক

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

— কোর 114

Answer 12

অনুগ্রহটি জিতেছে যে উত্তরটি সঠিক, তবে টেবিলের প্রথম সারিতে একীভূত / যোগদান করা ঘর থাকলে তা কাজ করে না (সমস্ত কক্ষের সমান প্রস্থ পাওয়া যায়) এটি কার্যকর হয় না।

এই ক্ষেত্রে আপনার সঠিকভাবে প্রদর্শন করতে ট্যাগ colgroupএবং colট্যাগ ব্যবহার করা উচিত :

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

Answer 13

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Comments

-1 কোনও ব্যাখ্যাের অভাব এবং খারাপ সমাধান উভয়ের জন্য। একটি নির্দিষ্ট পিক্সেল প্রস্থ ভিতরে কন্টেন্ট ফেলে pএকটা টেবিল কোষের মধ্যে যে নেই প্রায় অবশ্যই দিয়ে শেষ হবে একটি নির্দিষ্ট পিক্সেল প্রস্থ আছে pপারেন সজল বা টেবিল সেল পূরণ করতে ব্যর্থ।

— মার্ক

Answer 14

এটি নির্দিষ্ট (অ-আপেক্ষিক) প্রস্থ সহ আপনাকে word-wrap:break-word;একটি ব্লক উপাদান ( div) স্থাপন করতে হবে বলে মনে হয় । উদা:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

বা word-break:break-allঅভিষেক সাইমন এর পরামর্শ অনুযায়ী ব্যবহার ।

Answer 15

এটি আমার পক্ষে কাজ করে:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

এবং সারণী বৈশিষ্ট্যটি হ'ল:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Comments

অন্যান্য বেশ কয়েকটি উত্তরের মতো, এখানে কী কীটি এটি কাজ করে তা ব্যবহার করছে table-layout: fixedতবে ইতিমধ্যে এটির থেকে আরও পুরানো উত্তরটি প্রস্তাবিত হয়েছে, সুতরাং এই উত্তরটি কোনও নতুন তথ্য যুক্ত করে না।

— মার্ক

Answer 16

আপনার যদি কোনও টেবিল সীমানার প্রয়োজন না হয় তবে এটি প্রয়োগ করুন:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Comments

ইতিমধ্যে বেশ পুরানো উত্তরটি ব্যবহার করার পরামর্শ দিচ্ছে table-layout: fixed; এটি পৃষ্ঠায় নতুন কিছু যুক্ত করে না।

— মার্ক অ্যামেরি

Answer 17

আমি এমন একটি সমাধান পেয়েছি যা মনে হয় ফায়ারফক্স, গুগল ক্রোম এবং ইন্টারনেট এক্সপ্লোরার 7-9 এ কাজ করে। একপাশে দীর্ঘ পাঠ্য সহ দুটি কলামের টেবিল বিন্যাস করার জন্য For অনুরূপ সমস্যার জন্য আমি সর্বত্র অনুসন্ধান করেছি এবং একটি ব্রাউজারে যা কাজ করেছে তা অন্যটিকে ভেঙে দিয়েছে বা কোনও টেবিলে আরও ট্যাগ যুক্ত করা খারাপ কোডিংয়ের মতো মনে হচ্ছে।

আমি এর জন্য একটি টেবিল ব্যবহার করিনি। উদ্ধারের জন্য ডিএল ডিটি ডিডি। কমপক্ষে একটি দ্বি-কলামের লেআউট ঠিক করার জন্য, এটি মূলত একটি শব্দকোষ / অভিধান / শব্দ-অর্থ সেটআপ।

এবং কিছু জেনেরিক স্টাইলিং।

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

ভাসমান শব্দ-মোড়ানো এবং মার্জিন বাম ব্যবহার করে, আমার যা প্রয়োজন তা ঠিক পেয়েছি। ভেবেছি আমি এটি অন্যদের সাথে ভাগ করে নিই, সম্ভবত এটি শব্দটিকে মোড়ানো করতে সমস্যায় দ্বি-কলাম সংজ্ঞা স্টাইল বিন্যাসে অন্য কাউকে সহায়তা করবে।

আমি টেবিলের ঘরে ওয়ার্ড-র‌্যাপ ব্যবহার করার চেষ্টা করেছি, তবে এটি কেবল ইন্টারনেট এক্সপ্লোরার 9, (এবং ফায়ারফক্স এবং গুগল ক্রোমে) মূলত এখানে ভাঙা ইন্টারনেট এক্সপ্লোরার ব্রাউজারটি ঠিক করার চেষ্টা করেছিল।

Answer 18

টেবিলগুলি ডিফল্টরূপে মোড়ানো থাকে, সুতরাং সারণী কক্ষগুলির প্রদর্শনগুলি নিশ্চিত হন তা নিশ্চিত করুন table-cell:

td {
   display: table-cell;
}

Comments

-1; যে কোনও এইচটিএমএল উপাদানগুলির পাঠ্য কেবল সারণী নয় ডিফল্টরূপে মোড়ানো। এখানে পরামর্শটি আসলেই কোনও মানে করে না।

— মার্ক

Answer 19

স্টাইল = "টেবিল-বিন্যাস: স্থির; প্রস্থ: 98%; শব্দ-মোড়ানো: বিরতি-শব্দ"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

ডেমো - http://jsfiddle.net/Ne4BR/749/

এটি আমার জন্য কাজ করে মহান। আমার দীর্ঘ লিঙ্ক ছিল যা ওয়েব ব্রাউজারগুলিতে টেবিলটি 100% ছাড়িয়ে যেতে পারে। আইই, ক্রোম, অ্যান্ড্রয়েড এবং সাফারিতে পরীক্ষিত।

Comments

এটি মূলত শীর্ষ-ভোট প্রাপ্ত উত্তর হিসাবে একটি সদৃশ ; উভয় ক্ষেত্রেই সমাধানটি "ব্যবহার table-layout: fixed" এ ফোটে ।

— মার্ক অ্যামেরি

Answer 20

গুগল ক্রোম এবং ফায়ারফক্সের সাথে কাজ করে এমন একটি সমাধান (ইন্টারনেট এক্সপ্লোরার দিয়ে পরীক্ষিত নয়) display: table-cellএকটি ব্লক উপাদান হিসাবে সেট করা।

Answer 21

আপনি এটি চেষ্টা করতে পারেন যদি এটি আপনার জন্য উপযুক্ত হয় ...

আপনার টিডির ভিতরে একটি টেক্সেরিয়া রাখুন এবং এটি পটভূমির রঙ সাদা দিয়ে অক্ষম করুন এবং এর সারিগুলির সংখ্যা নির্ধারণ করুন।

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>