কিভাবে একটি উপাদান মধ্যে কলাম বিরতি রোধ করবেন?

Question

নিম্নলিখিত এইচটিএমএল বিবেচনা করুন:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

এবং নিম্নলিখিত সিএসএস:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

এটি যেমন দাঁড়িয়ে আছে, ফায়ারফক্স বর্তমানে এটি নিম্নলিখিতগুলির সাথে একইভাবে উপস্থাপন করে:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

লক্ষ্য করুন যে চতুর্থ আইটেমটি দ্বিতীয় এবং তৃতীয় কলামের মধ্যে বিভক্ত হয়েছিল। আমি কীভাবে এটি প্রতিরোধ করব?

পছন্দসই রেন্ডারিং এর মতো আরও কিছু দেখতে পারে:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

অথবা

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

সম্পাদনা করুন: প্রস্থটি কেবল অযাচিত রেন্ডারিং প্রদর্শনের জন্য নির্দিষ্ট করা হয়েছে। আসল ক্ষেত্রে অবশ্যই কোনও নির্দিষ্ট প্রস্থ নেই।

Comments

আপনি কি এই লি কে একক স্টাইল দেওয়ার চেষ্টা করেছেন? যেমন <লাই স্টাইল = "প্রস্থ: ??? পিক্স"> চার নম্বরটি কিছুটা দীর্ঘ </ </ li> ???

— rmagnum2002

Answer 1

এটি করার সঠিক উপায়টি ব্রেক-ইন-সিএসএস সম্পত্তি সহ :

.x li {
    break-inside: avoid-column;
}

দুর্ভাগ্যক্রমে, অক্টোবর 2019 পর্যন্ত, এটি ফায়ারফক্সে সমর্থিত নয় তবে এটি অন্য প্রতিটি বড় ব্রাউজার দ্বারা সমর্থিত । Chrome এর সাহায্যে আমি উপরের কোডটি ব্যবহার করতে সক্ষম হয়েছি, তবে আমি ফায়ারফক্সের জন্য কোনও কাজ করতে পারিনি ( বাগ 549114 দেখুন )।

ফায়ারফক্সের জন্য আপনি যে কাজটি করতে পারেন তা হ'ল আপনার অবিচ্ছিন্ন সামগ্রীটি একটি টেবিলের মধ্যে আবৃত করা তবে এটি যদি আপনি এড়াতে পারেন তবে এটি একটি সত্যই, সত্যই ভয়ঙ্কর সমাধান।

হালনাগাদ

উপরে উল্লিখিত বাগ রিপোর্ট অনুসারে, ফায়ারফক্স 20+ page-break-inside: avoidউপাদানটির ভিতরে কলাম বিরতি এড়াতে একটি প্রক্রিয়া হিসাবে সমর্থন করে তবে নীচের কোড স্নিপেটটি দেখায় যে এটি এখনও তালিকার সাথে কাজ করছে না:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

অন্যরা যেমন উল্লেখ করেছে, আপনি এটি করতে পারেন overflow: hiddenবা display: inline-blockতবে এটি মূল প্রশ্নে প্রদর্শিত বুলেটগুলি সরিয়ে দেয়। আপনার লক্ষ্যগুলি কীসের ভিত্তিতে আপনার সমাধানটি পরিবর্তিত হবে।

আপডেট 2 যেহেতু ফায়ারফক্স ভাঙা রোধ করে না display:tableএবং display:inline-blockএকটি নির্ভরযোগ্য তবে অ-শব্দার্থিক সমাধান হ'ল প্রতিটি তালিকা আইটেমকে তার নিজের তালিকায় মোড়ানো এবং সেখানে স্টাইলের নিয়ম প্রয়োগ করা:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

Comments

আমি বিশ্বাস করি অপেরা 11.5 সমর্থন করেbreak-inside: avoid-column

— অলহকি

এ খুঁজছি মন্তব্য 15 page-break-inside:avoid মুক্তিযোদ্ধা 20 মধ্যে কাজ করা উচিত

— ব্রায়ান নিকেল

2014 সালে, সঠিক বাক্য -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;

— গঠনটি

@ কার্লসজভবক্সেদা ফায়ারফক্স ৩১-এ কোনও উন্নতি দেখছেন না column কলাম-ব্রেক-ইন-পৃষ্ঠা বা পৃষ্ঠা-বিরতি-ভিতরে (উপসর্গের সাথে বা ছাড়াই) কাজ করছেন না।

— ব্রায়ান নিকেল

এটি কিছুটা দেরি হয়ে গেছে, তবে এটি 2018 এ এখনও একটি ইস্যু হিসাবে এটি এখানে শেষ হওয়া অন্যদের পক্ষে দরকারী। যদি কারও কাছে এখনও এটির সাথে ব্রাউজারগুলির মধ্যে বাগ রয়েছে overflow: hiddenতবে এটি সর্বোত্তম বিকল্প। display: inline-block;দুর্ভাগ্যক্রমে, ক্রোমের সাথে নতুন কৌতূহল সৃষ্টি করে।

— SilasOtoko

Answer 2

যোগ করার পদ্ধতি;

display: inline-block;

শিশু উপাদানগুলিতে তাদের কলামগুলির মধ্যে বিভক্ত হওয়া আটকাবে।

Comments

এটা ভাল. এখন ইনলাইন-ব্লককারী স্টাফগুলির খারাপ আচরণ রোধ করার একটি সম্ভাব্য উপায় হ'ল এক লাইনে স্কুশ করা (যদি তারা খুব কম হয়) তবে এটি একটি display:blockউপাদান দিয়ে আরও মোড়ানো । এটি সম্ভবত আপাতত একটি শক্ত ফায়ারফক্স কাজ করবে।

— স্টিভেন লু

এই সমাধান তালিকার আইটেমটি সরিয়ে দেয়, সুতরাং আপনি উদাহরণস্বরূপ অর্ডার তালিকাগুলি যদি ব্যবহার করেন তবে এটি বিকল্প হবে না।

— রিকার্ডো জিয়া

অনুচ্ছেদে কলামগুলিতে বিভক্ত করার জন্য পুরোপুরি কাজ করে।

— ক্রিসি

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

— verdy_p

আমার জন্য কাজ <li>করে তবে width:100%;তাদের অনুভূমিকভাবে স্ট্যাকিং থেকে রোধ করতে আমাকে যুক্ত করতে হয়েছিল।

— জাস্টিন

Answer 3

যে উপাদানটি আপনি ভাঙতে চান না তার স্টাইলটি অনুসরণ করুন:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

Comments

ধন্যবাদ!! আমার এফএফ নিয়ে সমস্যা ছিল এবং এটি ঠিক হয়ে যায়!

— ফ্রান্সিস পেরোন

আমিও. উপরের সমাধানগুলি আমার পক্ষে কাজ করে না, তবে আপনার কাজটি করেছিল। যশ!

— ম্যাক্সেক্স

এটি এফএফ এ কাজ করে এবং এটি আসলে আমার লিখিত সামগ্রী লুকায় না!

— জাস্টিন

সুন্দর। কলাম পাঠ্য অনুচ্ছেদের পাশাপাশি কাজ করে। ওভারফ্লো যুক্ত করা হয়েছে: কলামগুলির সাথে <p> ইন্ড <ডিভিড> -এ লুকানো। এফএফের জন্য কাজ করে।

— dichterDichter

আসলে, overflow:hiddenনিয়ম, অন্যান্য নিয়ম জন্য একটি ফিক্স নয় এটা হল কি অবিভাজিত বিন্যাস ঘটায় ...

— গ্রাস ডাবল

Answer 4

অক্টোবর 2014 হিসাবে, ব্রেক-ইন-এখনও ফায়ারফক্স এবং IE 10-11-তে বগী বলে মনে হচ্ছে। যাইহোক, ওভারফ্লো যুক্ত করুন: বিরতির অভ্যন্তরের সাথে উপাদানটিতে লুকানো: এড়ানো, এটি ফায়ারফক্স এবং IE 10-11-এ কাজ করে বলে মনে হচ্ছে। আমি বর্তমানে ব্যবহার করছি:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Comments

এটি সর্বাধিক বিস্তৃত তালিকা বলে মনে হচ্ছে

— বাইনারিফ্যান্ট

Answer 5

ফায়ারফক্স এখন এটি সমর্থন করে:

page-break-inside: avoid;

এটি কলামগুলি অতিক্রম করে উপাদানগুলির সমস্যা সমাধান করে।

Comments

আপনি এই কাজ পেয়েছেন? আমি এফএফ 22 এ এই ঝাঁকুনির

— ব্রায়ান নিকেল

এখানে একই, ফায়ারফক্স ২২ এ কাজ করে না Also এছাড়াও, ফায়ারব্যাগ কেবল প্রদর্শন করে page-break-before:বা page-break-after:নাpage-break-inside:

— রিকার্ডো জিয়া

ফায়ারফক্সের 28 সংস্করণ। এই একমাত্র আমার জন্য এখনও কাজ করে, ধন্যবাদ!

— Sander Verhagen

Answer 6

গৃহীত উত্তরটি এখন দুই বছরের পুরানো এবং বিষয়গুলি পরিবর্তিত হয়েছে বলে মনে হচ্ছে।

এই নিবন্ধটিcolumn-break-inside সম্পত্তি ব্যবহার ব্যাখ্যা করে । এটি কীভাবে বা কেন এর থেকে পৃথক হয় তা আমি বলতে পারি না break-inside, কারণ কেবলমাত্র ডাব্লু 3-র স্পেসে পরেরটি ডকুমেন্টেড বলে মনে হয়। তবে, ক্রোম এবং ফায়ারফক্স নিম্নলিখিতগুলি সমর্থন করে:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}

Comments

এটি কোনও সাধারণ <div class = "a"> এর জন্য কাজ করে না যেখানে "a" উপরে আপনার "লি" প্রতিস্থাপন করে। ডিভটি তখনও ভিতরে brokeুকে গেল। এফএফ 26

— নাসের

একটি বাগ না। উপরের কোড বর্ণিত ফাংশনটির জন্য সঠিক যদি এর নির্বাচকটি কেবলমাত্র একটি এল এলিমেন্টের জন্য হয়। আপনি এখনও এই নমুনায় "লি {...}" এর পরিবর্তে অন্য একটি সিএসএস নির্বাচনকারী "Div.a। ...}" ব্যবহার করতে পারেন।

— verdy_p

তবে ক্রোম এখনও ওয়েবেকিট-কলাম-ব্রেক-ইন সমর্থন করে না: এড়ানো; টেবিলের সারিটিতে: এটি কার্যকর হয় না এবং আমরা এখনও খারাপ অবস্থানে টেবিল ভাঙ্গতে এড়াতে পারি না (উল্লেখযোগ্যভাবে যদি কোনও টেল সেলটিতে কেবল পাঠ্য নয় তবে আইকন থাকে; তবে ক্রোমও একটি পাঠ্য লাইনের মাঝখানে কোনও উল্লম্ব অবস্থানে বিভক্ত হয় বলে মনে হয় , প্রথম কলামের নীচে পাঠ্য গ্লিফগুলির উপরের অংশটি এবং পরবর্তী কলামের শীর্ষে টেক্সট গ্লাইফগুলির নীচের অংশটি সহ পাঠ্য

— ভাঙ্গা

2017 হিসাবে, কলাম-ব্রেক-অভ্যন্তর কোনও বৈধ CSS সম্পত্তি হিসাবে মনে হয় না। এমডিএন কেবল বলেছে "এজ এছাড়াও অ-মানক-ওয়েবকিট-কলাম-ব্রেক-ইনর ভেরিয়েন্টকে সমর্থন করে।"

— জ্যাকব সি বলেছেন

Answer 7

2015 সালে এটি আমার জন্য কাজ করে:

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

<div class='x'>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four is a bit longer</li>
    <li>Number five</li>
  </ul>
</div>

Comments

উপর আমার জন্য এই কাজ করছে ulউপাদান, সিএসএস ঠাট পোস্ট হয়: css-tricks.com/almanac/properties/b/break-inside এবং caniuse সামঞ্জস্য নোট উপর ভিত্তি করে সঠিক বলে মনে হয়: "আংশিক সমর্থন সমর্থন না বোঝায় break-before, break-after,break-inside বৈশিষ্ট্য ওয়েবকিট- এবং ব্লিঙ্ক-ভিত্তিক ব্রাউজারগুলির -webkit-column-break-*একই ফলাফল অর্জনের জন্য অ-স্ট্যান্ডার্ড বৈশিষ্ট্যগুলির জন্য সমান সমর্থন রয়েছে (তবে কেবলমাত্র autoএবং alwaysমানগুলি) Firef ফায়ারফক্স সমর্থন করে না break-*তবে page-break-*একই ফলাফল অর্জনের জন্য বৈশিষ্ট্যগুলিকে সমর্থন করে না । "

— নব্রাউন

Answer 8

নিম্নলিখিত কোড উপাদানগুলির ভিতরে কলাম বিরতি রোধ করতে কাজ করে:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

Answer 9

2019 সালে, এটি ক্রোম, ফায়ারফক্স এবং অপেরাতে (অন্য অনেকগুলি ব্যর্থ চেষ্টা পরে):

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
           break-inside: avoid-column;
             page-break-inside: avoid;
}

Answer 10

ফায়ারফক্স ২ এর প্রয়োজনীয়তা রয়েছে বলে মনে হচ্ছে

page-break-inside: avoid;

এবং Chrome 32 টির প্রয়োজন

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

Answer 11

আমার মনে হয় একই সমস্যা ছিল এবং এর একটি সমাধান খুঁজে পেয়েছি:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

এফএফ 38.0.5 এও কাজ করছে: http://jsfiddle.net/rkzj8qnv/

Comments

এই সমাধানটি আমাকে সহায়তা করে

— ওজিচেক

Answer 12

ফায়ারফক্সের একটি সম্ভাব্য কাজটি হ'ল "টেবিলের" ​​অভ্যন্তরে কিছুটা বিরতি রাখতে চান না এমন উপাদানগুলির CSS বৈশিষ্ট্য "প্রদর্শন" সেট করা। আমি জানি না এটি এলআই ট্যাগের জন্য কাজ করে (আপনি সম্ভবত তালিকা-তালিকা-শৈলী হারাবেন), তবে এটি পি ট্যাগের জন্য কাজ করে।

Comments

এই সমাধান তালিকার আইটেমটি সরিয়ে দেয়, সুতরাং আপনি উদাহরণস্বরূপ অর্ডার তালিকাগুলি যদি ব্যবহার করেন তবে এটি বিকল্প হবে না।

— রিকার্ডো জিয়া

Answer 13

আমি স্রেফ কিছু সংশোধন করেছি divযা যুক্ত করে পরবর্তী কলামে বিভক্ত ছিল

overflow: auto

সন্তানের কাছে div s।

* উপলব্ধি করেছে এটি ফায়ারফক্সে কেবল এটি সংশোধন করে!

Answer 14

কার্ড-কলামগুলি ব্যবহার করার সময় আমি একই সমস্যার মুখোমুখি হয়েছি

আমি এটি ব্যবহার করে স্থির করেছি

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

Answer 15

<style>
ul li{display: table;}  
</style>

পুরোপুরি কাজ করে

Answer 16

আমি আসল উত্তরের একটি আপডেট করেছি।

এটি ফায়ারফক্স এবং ক্রোমে কাজ করছে বলে মনে হচ্ছে: http://jsfiddle.net/gatsbimantico/QJeB7/1/ebded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

দ্রষ্টব্য: ভাসা সম্পত্তি ব্লক আচরণ উপার্জন এক বলে মনে হয়।

Answer 17

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

আমার কাছে অপের মতো একটি তালিকা ছিল তবে এতে দুটি আইটেম, আইটেম এবং বোতামগুলি রয়েছে যাতে এই আইটেমগুলিতে কাজ করা যায়। আমি এটি একটি টেবিল মত চিকিত্সা <ul> - table, <li> - table-row, <div> - table-cellএকটি 4 কলাম বিন্যাস মধ্যে উল করা। কলামগুলি কখনও কখনও আইটেম এবং এর বোতামগুলির মধ্যে বিভক্ত হয়। আমি যে কৌশলটি ব্যবহার করেছি তা হ'ল ডিভ উপাদানগুলিকে বোতামগুলি কভার করার জন্য একটি লাইন উচ্চতা দেওয়া।