টেবিল সেল <td> সামগ্রী মোড়ানোর জন্য কীভাবে বাধ্য করবেন?


146

Heres পুরো পৃষ্ঠা * মোড়কযোগ্য একটি মেইন সিএসএস ফাইলে সংজ্ঞায়িত করা হয়

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}                

পুরো পৃষ্ঠাটি এখানে:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

আমি জমা দেওয়ার সময় এটি কেবল প্রসারিত।
এই পৃষ্ঠাটি একটি ডিভের মধ্যেও রয়েছে। আমার কি ডিভ এবং টেবিলের প্রস্থ নির্ধারণ করা দরকার?


1
আপনি কোথায় সংজ্ঞা দিচ্ছেন wrappable?
ক্যানন

2
.wrappableক্লাস সংজ্ঞায়িত হয় কোথায় ? আপনি কোন ব্রাউজার ব্যবহার করছেন?
দানি

ব্যবহৃত ব্রাউজারটি বিশেষত গুরুত্বপূর্ণ --- IE এর পুরানো সংস্করণ সমর্থন করে না max-width। অন্যান্য প্রচুর জিনিস রয়েছে যা সমস্যা হতে পারে এবং আরও তথ্য ব্যতীত বলা অসম্ভব, তবে এটিই ভেঙে যেতে পারে।
ক্রিস মরগান

আমি মূলত কেবল পাঠ্য প্রস্থের মধ্যে রাখার চেষ্টা করছি এবং আমি তা সংশ্লেষ করার পরে টেবিলটি প্রসারিত করব না
ডক হলিডে

উত্তর:


292

ব্যবহার করুন table-layout:fixedটেবিল এবং word-wrap:break-wordTD হবে।

এই উদাহরণটি দেখুন:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>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.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

ডেমো:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>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.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
    


আপনার সীমানা-পতনটি যুক্ত করা উচিত: আপনার উত্তরের উপরের অংশে ধসে পড়ুন যাতে লোকেরা আপনার উত্তরটি দৃষ্টি দিয়ে স্ক্যান করছে তারা দ্রুত পুরো উত্তরটি পেতে পারে।
doodwardgb

আরও কিছু সংশোধন টেবিলের জন্য {সীমান্ত-পতন: পতন; টেবিল-বিন্যাস: স্থির; শব্দ-মোড়ানো: ব্রেক-শব্দ;} টেবিল টিডি {প্রস্থ: 100px; শব্দ-মোড়ানো: বিরতি-শব্দ;
Kul

44

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

<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%
}


15
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

6
হতে পারে আপনি কোডটি ব্যাখ্যা করতে পারেন যাতে এটি সবার পক্ষে পরিষ্কার হয়ে যায়
ফেডারিকো

এটি ঝরঝরে টেবিল দেখায়, তবে সামগ্রীটি কাটা হয়েছে; অর্থাত। এর বড় বিষয়বস্তু থাকলে কিছু শব্দ দেখতে পাবে না। overflow:hidden
wpcoder

সর্বাধিক প্রস্থের হার্ডকোডিং ভাল নয়। এটি বৃহত্তর রেজোলিউশনগুলিতেও স্কেল করবে না ইত্যাদি Y আপনি টেবিলটিকে সঠিকভাবে আকারে প্রতিক্রিয়া জানাতে চান।
ব্যবহারকারী 959690

4

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

max-width:someValue;
word-wrap:break-word

5
নোট করুন যে max-widthএকটি pxমান হতে হবে , না%
ম্যাক্সিডিসন

3

যখন আমার একটি ঘরে "সুন্দর" JSON প্রদর্শন করা দরকার তখন এটি আমার জন্য কাজ করেছিল:

td { white-space:pre }

white-spaceসম্পত্তি সম্পর্কে আরও :

  • normal : এই মানটি ব্যবহারকারী এজেন্টদের সাদা স্থানের ক্রমগুলি ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে লাইন বক্সগুলি পূরণ করার জন্য লাইনগুলিকে নির্দেশ দেয়।

  • pre: এই মানটি ব্যবহারকারীর এজেন্টদের সাদা জায়গার ক্রমগুলি ভেঙে ফেলা থেকে বাধা দেয়।
    রেখাগুলি কেবল সংরক্ষিত নিউলাইন অক্ষরগুলিতেই ভাঙা হয়।

  • nowrap: এই মানটি সাদা স্থানটিকে ধসে পড়ে normalতবে পাঠ্যের মধ্যে লাইন বিরতিগুলিকে দমন করে।

  • pre-wrap: এই মানটি ব্যবহারকারীর এজেন্টদের সাদা জায়গার ক্রমগুলি ভেঙে ফেলা থেকে বাধা দেয়।
    সংরক্ষিত নিউলাইন অক্ষরগুলিতে লাইনগুলি ভাঙা হয় এবং লাইন বাক্সগুলি পূরণ করার জন্য প্রয়োজনীয়।

  • pre-line: এই মানটি ব্যবহারকারী এজেন্টদের সাদা জায়গার ক্রমগুলি ধসের নির্দেশ দেয়।
    সংরক্ষিত নিউলাইন অক্ষরগুলিতে লাইনগুলি ভাঙা হয় এবং লাইন বাক্সগুলি পূরণ করার জন্য প্রয়োজনীয়।

(এছাড়াও, উত্সে আরও দেখুন ।)



0

আপনি যদি কলামটি ঠিক করতে চান তবে আপনার প্রস্থ নির্ধারণ করা উচিত। উদাহরণ স্বরূপ:

<td style="width:100px;">some data</td>


1
আমি চেষ্টা করেছিলাম ... এটি কোনও কারণে <টডি আইডি = "মন্তব্য - $। Comments.id class" শ্রেণি = "মোড়কযোগ্য" শৈলী = "প্রস্থ: 100px"> $ {মন্তব্যসটকমেন্ট ment </ td টেবিলটি প্রসারিত করে চলেছে >
ডক হলিডে

0

সমস্যাটি মোকাবেলার এটি আরেকটি উপায় যা আপনার যদি দীর্ঘ স্ট্রিং থাকে (যেমন ফাইলের নামের নাম) এবং আপনি কেবলমাত্র নির্দিষ্ট অক্ষরে (যেমন স্ল্যাশ) স্ট্রিংগুলি ভাঙতে চান। আপনি ইউনিকোড জিরো প্রস্থ স্পেস অক্ষরগুলি HTML এ স্ল্যাশগুলির ঠিক আগে (বা পরে) সন্নিবেশ করতে পারেন ।


0
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

আমি বাইনারি তথ্য এবং এটি পুরোপুরি এখানে কাজ সঙ্গে পরীক্ষা করেছি।

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