সিএসএস ব্যবহার করে, কীভাবে "B" এর "নীচে / প্রান্তে" "শক্ত করে" সারিবদ্ধ করবেন যেখানে "B" এর অজানা প্রস্থ এবং পাঠ্য মোড়ানো রয়েছে

9

আমার একটি "বাছাইযোগ্য" টেবিল রয়েছে যেখানে বর্তমানে সাজানো কলামের শিরোনামটি একটি আইকন প্রদর্শন করে:

এখানে চিত্র বর্ণনা লিখুন

সাজানোর আইকনটি পাঠ্যের শেষে প্রদর্শিত হবে (যেমন, আমরা এলটিআর / আরটিএল সমর্থন করছি)। আমি বর্তমানে ব্যবহার করছি display:flex। তবে, যদি টেবিলের প্রস্থ সঙ্কুচিত হয়ে যায় এবং কলামের শিরোনামের পাঠ্যটি মোড়ানো শুরু হয়, আমি अस्पष्ट রাজ্যে চলে যাই যেখানে কোন কলামটি সাজানো হয়েছে তা পরিষ্কার নয়:

এখানে চিত্র বর্ণনা লিখুন

পরিবর্তে আমি নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করতে চাই:

  1. আইকনটি সর্বদা "দৃly়ভাবে" টেক্সটের দীর্ঘতম লাইনের "শেষের" সাথে সংযুক্ত থাকে (এমনকি মোড়কের ঘর / বোতাম আরও প্রশস্ত হলেও)।
  2. আইকনটি পাঠ্যের শেষ সারিটির সাথে নীচে-প্রান্তিক হওয়া উচিত।
  3. আইকনটি কখনই তার নিজের লাইনে rapেকে দেওয়া উচিত নয়।
  4. বোতামটি অবশ্যই উপস্থিত থাকতে হবে এবং ঘরের পুরো প্রস্থটি স্প্যান করতে হবে। (এটি অভ্যন্তরীণ স্টাইলিং এবং মার্কআপ প্রয়োজন অনুসারে পরিবর্তন করতে পারে))
  5. সিএসএস এবং এইচটিএমএল কেবলমাত্র সম্ভব হলে।
  6. এটি পরিচিত / সেট কলাম প্রস্থ বা শিরোনাম পাঠ্যের উপর নির্ভর করতে পারে না।

উদাহরণ স্বরূপ:

এখানে চিত্র বর্ণনা লিখুন

আমি বিভিন্ন সমন্বয় একটি গুচ্ছ নিয়ে পরীক্ষা-নিরীক্ষা করে থাকেন display: inline/inline-block/flex/grid, position, ::before/::after, এবং এমনকি float(!) কিন্তু কাঙ্ক্ষিত আচরণ পেতে পারে না। এখানে আমার বর্তমান কোডটি সমস্যাটি দেখায়:

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  line-height: 1.4;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
}
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>
স্নিপেট প্রসারিত করুন

এই ইউআইটি কীভাবে সম্পন্ন করবেন সে সম্পর্কে কোনও ধারণা? টেবিল বা বোতামের স্টাফগুলির সাথে এটির খুব কম সম্পর্ক রয়েছে। সত্যিই আমার Thing A"শক্তভাবে" নীচের / প্রান্তটি Thing B(নমনীয় প্রস্থের এবং প্রলেপযুক্ত Thing Aমোড়ানো থাকতে পারে ) এর সাথে সংযুক্ত থাকা প্রয়োজন তবে এটি নিজের লাইনের সাথে আবৃত করতে পারে না।

আমি flexমানগুলির সাথে জগাখিচুড়ি করার চেষ্টা করেছি তবে যে কোনও সংমিশ্রণটি পাঠ্যটি অসময়ে আবদ্ধ করে দেয় বা তাড়াতাড়ি যথেষ্ট নয়।

html  css  layout  html-table  alignment 
— robertwbradford
সূত্র
আমি আপনার সমস্যাটি আপনার বর্তমান সিএসএস এবং এইচটিএমএল দিয়ে সমাধান করার চেষ্টা করেছি তবে বোতাম এবং স্প্যান উপাদানটি একত্রিত হয়ে গেছে যেখানে আমি সিএসএস এবং এইচটিএমএল সহ ফন্ট-দুর্দান্ত ব্যবহার করার সিদ্ধান্ত নিয়েছি এটি এখানে একটি উদাহরণ আশা করি
— stan chacon
@ স্ট্যাচকন একবার দেখে নেওয়ার জন্য ধন্যবাদ। আমার উল্লেখ করা উচিত ছিল, তবে কলামের প্রস্থগুলি সেট করার বা শিরোনামের পাঠ্যটি সময়ের আগে কী হবে তা জানার আমার কাছে বিলাসিতা নেই। প্রয়োজনীয়তাগুলিতে আমি # 6 যোগ করেছি।
— রবার্টব্রাবর্ডফোর্ড
1
@ ইস্টচাকন ... এবং আমি এখনই রিবাইতে যেতে পারলাম :)
— রবার্টব্রাবর্ডফোর্ড
@ আরবার্টবারব্রাফোর্ড এটি ইতিমধ্যে সম্বোধন করা হয়? অথবা আপনি এখনও সমাধান খুঁজছেন?
— ফুরকান রাহামথ
@ মোহাম্মদফুরকানরাহমথ এম, এখনও এর উত্তর দেওয়া হয়নি। এখনও খুঁজছি ...
— রবার্টব্রাবর্ডফোর্ড

উত্তর:

1

মনে করুন এর জন্য আপনার জেএস দরকার। এখানে এমন একটি উত্তর রয়েছে যা 5 বাদে সমস্ত শর্ত পূরণ করতে পারে।

const debounce = fn => {
  let frame;

  return (...params) => {
    if (frame) {
      cancelAnimationFrame(frame);
    }
    frame = requestAnimationFrame(() => {
      fn(...params);
    });
  };
};

const text = [...document.querySelectorAll(".text")];
const iconWidth = "1.25rem";

const positionIcon = () => {
  if (!text) return;
  
  text.forEach(t => {
    const width = t.getBoundingClientRect().width;

    const icon = t.nextElementSibling;
    if (!icon) return;
    
    icon.style.left = `calc(${width}px + ${iconWidth})`;
  });
};

positionIcon();
window.addEventListener("resize", debounce(positionIcon));
.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  bottom: 1rem;
  left: 100%; /* no js fallback */
}

.sort svg {
  height: 1.25rem;
  width: 1.25rem;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <svg id="arrow" viewBox="0 0 24 24" role="presentation"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</svg>
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span class="text">Age</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span class="text">Favourite Food</span>
          <span class="sort">
          <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span class="text">Favorite Color</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span class="text">Likes Neil Diamond?</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
    </tr>
  </thead>
</table>
স্নিপেট প্রসারিত করুন

— সূর্যদেব
সূত্র
1

আমি মনে করি এখানে দৃশ্যমান অস্পষ্টতা বাদে কোনও বিষয় নেই। এখানে আমার পর্যবেক্ষণ আছে।

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

এত শক্ত বাঁধা, অস্তিত্ব আছে, কেবলমাত্র গতিময় ব্যবধানের ফলে ভিজ্যুয়াল অস্পষ্টতা দেখা দিচ্ছে।

এখন সমাধানে আসছি, জাভাস্ক্রিপ্টের হস্তক্ষেপ ছাড়াই আমি যে নিকটতম সমাধানটি নিয়ে আসতে পারলাম তা নিখুঁত না হলেও তা হ'ল

  • কোনও উপাদানটির ভিতরে পাঠ্যটি মোড়ানো, সম্ভবত একটি স্প্যান

  • সর্বাধিক প্রস্থ প্রদান করে এই পাঠ্যের প্রস্থ সীমাবদ্ধ করুন:

    button.button > span {
    max-width: 60%; // I saw this to be decent enough
    text-align: center; // This is to offset the visual effect of spacing
}

দ্রষ্টব্য:text-align: center স্থান অনুপস্থিত প্রভাব কমাতে, যদি না আপনি কঠোর প্রয়োজন এই সঙ্গে যেতে করেছি মাত্র।

এটি যদি আপনার প্রশ্নের ঠিকানা দেয় তবে দয়া করে আমাকে জানান।

এইভাবে প্রভাবটি হবে: এখানে চিত্র বর্ণনা লিখুন

— ফুরকান রাহমথ
সূত্র
জবাবের জন্য ধন্যবাদ. এর জন্য আমাদের এটির শেষে থাকা দরকার।
— রবার্টবার্বাফোর্ড
@ আরবার্টবার্বাডফোর্ড আপনার যে সম্ভাব্য সমস্যার মুখোমুখি হচ্ছেন তা ব্যাখ্যা করে আমি আমার উত্তর পরিবর্তন করেছি এবং সমাধানের প্রস্তাব দিয়েছি। এটি যদি আপনার প্রশ্নের উত্তর দেয় তবে দয়া করে আমাকে জানান।
— ফুরকান রাহমথ
0

আমি মনে করি আপনি প্রায় ভাল আছেন এবং (3) মিস করছেন যা কিছুটা কৌশল। একটি ধারণা হ'ল আইকন উপাদানটির প্রস্থ সমান 0করে পাঠ্য এবং সাজানোর আইকনের মধ্যে যে কোনও সাদা স্থানকে অক্ষম করতে হবে। এর জন্য আমি পাঠ্যের জন্য একটি অতিরিক্ত মোড়ক ব্যবহার করেছি এবং ফ্লেক্সবক্সের ব্যবহার সরিয়েছি।

আপনার কিছুটা ওভারফ্লো হবে তবে আপনি প্যাডিং প্রয়োগ করছেন বলে এটি কোনও সমস্যা নয়। আপনি চাইলে এটিও বাড়াতে padding-rightপারেন

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size:0;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
}
.button > span {
  font-size: 0.875rem;
}
.sort {
  width: 0;
  height: 1.25rem;
  display: inline-block;
  vertical-align: bottom;
}
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span>Age</span>
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Favorite Food</span>
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span>Favorite Color</span>
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Likes Neil Diamond?</span>
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>
স্নিপেট প্রসারিত করুন

— তেমনি আফিফ
সূত্র
জবাবের জন্য ধন্যবাদ. কিছু ভাল পয়েন্ট, তবে আমি এটি "প্রয়োজনীয়তা 1" পূরণ করতে দেখছি না যেখানে পাঠ্যের দীর্ঘতম সারির শেষের সাথে তীরটি সারিবদ্ধ করা দরকার। "প্রিয় রঙ" এর ক্ষেত্রে, "রঙ" যখন দ্বিতীয় লাইনে আবৃত হয়, আইকনটি শেষ স্ক্রিনশটটিতে প্রদর্শিত হিসাবে "প্রিয়" এর শেষের সাথে অনুভূমিকভাবে প্রান্তিককরণ করা উচিত।
— রবার্টব্রাবর্ডফোর্ড
1
@ আরবার্টব্রাডফোর্ড আহ সেভাবে বুঝতে পারেন নি .. আমি ভেবেছিলাম এটি শেষের সাথে শক্ত হওয়া উচিত। আমি মনে করি আপনি এই প্রয়োজনের জন্য ভাগ্যের বাইরে ...
— তেমনি আফিফ
0

যদি আপনার থ্যাড শিরোনাম গতিশীল না হয় তবে আমার খুব সহজ ফিক্স।

এর জন্য আপনাকে শিরোনাম এবং এসভিজি আইকনটির শেষ শব্দটি একসাথে রাখতে হবে

উদাহরণ: -html 

<button>
 Long 

<span> title 
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>

অপসারণ প্রদর্শন: বাটন ক্লাস থেকে নমনীয় এবং শৈলী প্রদর্শন: যোগ স্প্যান ইনলাইন-ব্লক

স্প্যানটি ইনলাইন-ব্লক হওয়ার কারণে এসভিজি আইকনটি কখনই পৃথক লাইনে থাকবে না। কমপক্ষে এটির সামনে একটি শব্দ থাকবে

— শিরীশ মহরজন
সূত্র
উত্তর দেওয়ার জন্য আপনাকে ধন্যবাদ। আমি এটি একটি উপাদান হিসাবে তৈরি করছি, তাই শিরোনাম পাঠ্য গতিশীল হবে :(
— রবার্টব্রাবর্ডফোর্ড
শেষ শব্দটি স্প্যান করতে আপনি জেএস ব্যবহার করতে পারেন। এটি এমন কঠিন হওয়া উচিত নয়
— শিরীশ মহার্জান
0

আপনি এটির মতো চেষ্টা করতে পারেন:

<style>

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}


.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
    
 /* display: flex;
  align-items: flex-end;*/
  font-weight: bold;
  line-height: 1.4;
  float: left;
}
@media only screen and (min-width:502px)
{.button {
    width: calc(192px - 89px);
  }
  .button.food {
    width: calc(214px - 89px);
}
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}
.sort svg {
  position: absolute;
}
</style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button food">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>
স্নিপেট প্রসারিত করুন

আশা করি এই উত্তরটি আপনার পক্ষে সহায়ক হবে mobile আমি মোবাইল ভিউয়ের জন্য সিএসএস তৈরি করিনি!

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