সিএসএস পাঠ্য-ওভারফ্লো: উপবৃত্ত; কাজ করছে না?

Question

আমি জানিনা কেন এই সাধারণ সিএসএস কাজ করছে না ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

চতুর্থ "টেস্ট" প্রায় কাটা উচিত

Comments

সম্পর্কিত স্ট্যাকওভারফ্লো.com

— অ্যাড্রিয়েন

সম্পর্কিত: মাল্টিলাইন পাঠ্যে এলিপসিস প্রয়োগ করা

— মাইকেল বেনজামিন

FF only- যদি filterপ্রয়োগ করা হয় তবে উপবৃত্তগুলি সরবরাহ করা হবে না। বাগ খোলা হয়েছে

— vsync

আমি এর সাথে সমস্যার সমাধান সম্পর্কে একটি পোস্ট লিখেছিলাম text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow

— ফাউস্টো এনএ

আমার ক্ষেত্রে, প্রদর্শন সরিয়ে: উপাদান থেকে

— নমনীয়তা

Answer 1

text-overflow:ellipsis; নিম্নলিখিতগুলি সত্য হলে কেবল কাজ করে:

• উপাদানটির প্রস্থ অবশ্যই px(পিক্সেল) সীমাবদ্ধ করতে হবে । %(শতাংশে) প্রস্থ কাজ করবে না।
• উপাদান থাকতে হবে overflow:hiddenএবং white-space:nowrapসেট করা উচিত ।

আপনার এখানে সমস্যা হওয়ার কারণ হ'ল widthআপনার aউপাদানটি সীমাবদ্ধ নয়। আপনার একটি widthসেটিংস আছে তবে উপাদানটি সেট করা আছে display:inline(যেমন ডিফল্ট) এটি এটিকে উপেক্ষা করছে এবং অন্য কোনও কিছুই এর প্রস্থকে সীমাবদ্ধ করছে না।

আপনি নিম্নলিখিতগুলির মধ্যে একটি করে এটি ঠিক করতে পারেন:

• থেকে উপাদান সেট display:inline-blockবা display:block(সম্ভবত সাবেক কিন্তু আপনার লেআউট চাহিদার উপর নির্ভর করে)।
• এর ধারক উপাদানগুলির মধ্যে একটি সেট করুন display:blockএবং সেই উপাদানটিকে একটি নির্দিষ্ট widthবা দিন max-width।
• এটিকে উপাদানটি সেট করুন float:leftবা float:right(সম্ভবত প্রাক্তন, তবে আবার, উভয়ই উপবৃত্তির সাথে সম্পর্কিত হিসাবে একই প্রভাব ফেলতে হবে)।

আমি পরামর্শ দেব display:inline-block, যেহেতু এটি আপনার লেআউটে সর্বনিম্ন জামানত প্রভাব ফেলবে; এটি display:inlineলেআউট সম্পর্কিত যতটা এটি বর্তমানে ব্যবহার করছে ঠিক তেমন কাজ করে তবে অন্যান্য পয়েন্টগুলি নিয়েও নির্দ্বিধায় পরীক্ষণ করতে পারে; এই বিষয়গুলি কীভাবে একসাথে ইন্টারঅ্যাক্ট করে তা বুঝতে আপনাকে সহায়তা করার জন্য আমি যথাসম্ভব তথ্য দেওয়ার চেষ্টা করেছি; সিএসএস বোঝার একটি বড় অংশ হ'ল বিভিন্ন শৈলী একসাথে কীভাবে কাজ করে তা বোঝা।

display:inline-blockআপনি কতটা কাছাকাছি ছিলেন তা দেখানোর জন্য এখানে আপনার কোড সহ একটি স্নিপেট রয়েছে ।

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

দরকারী তথ্যসূত্র:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Comments

আমি যদি প্রতিক্রিয়াশীল ডিজাইনের কারণে সেট প্রস্থ ব্যবহার করতে না পারি তবে কী হবে?

— সার্চফোরকনলজ

নোট করুন যে সর্বোচ্চ-প্রস্থও কাজ করে। এটি আমাকে সহায়তা করেছিল কারণ আমার কাছে এমন একটি আইকন ছিল যা স্প্যানের প্রস্থ নির্বিশেষে পাঠ্যের শেষে আলিঙ্গন করতে হয়েছিল। (অন্যথায় যদি পাঠ্যটি স্প্যানের পুরো প্রশস্ততা না নেয় তবে আইকনটি ডানদিকে ভেসে উঠবে)

— কেভিন

দ্রষ্টব্য: white-space: nowrapআসলে প্রয়োজনীয় নয়। আমরা এগুলি না করেও উপবৃত্তগুলি দেখতে পাচ্ছি। একাধিক লাইনের জন্য text-overflow, এই এসও দেখুন

— নির্লজ্জ

এটি সাম্প্রতিক পরিবর্তন কিনা তা নিশ্চিত নয়, তবে ক্রোম 50 (বিটা) এ আপনাকে পিক্সের মানের প্রস্থ নির্ধারণ করতে হবে না - "100%" এছাড়াও কাজ করে। white-space: nowrapযদিও প্রয়োজন।

— thdoan

আপনি না একটি নির্দিষ্ট সেট করতে হবে widthসব। আপনাকে যা করতে হবে তা হ'ল একটি সেট white-space: nowrap;এবং এটি ঠিক কাজ করে।

— adamj

Answer 2

গৃহীত উত্তরটি দুর্দান্ত। তবে, আপনি এখনও %প্রস্থ এবং ব্যবহার করতে পারেন text-overflow: ellipsis। সমাধানটি সহজ:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

মনে হচ্ছে যখনই আপনি ব্যবহার calcচূড়ান্ত মান পরম পিক্সেল, যা consequentially পরিবর্তিত মধ্যে অনুষ্ঠিত হয় 80%ভালো কিছু করার জন্য 800pxএকটি জন্য 1000px-width ধারক। অতএব, ব্যবহারের পরিবর্তে width: [YOUR PERCENT]%, ব্যবহার করুন width: calc([YOUR PERCENT]%)।

Answer 3

সুতরাং যদি আপনি এই প্রশ্নে পৌঁছে যান যে কোনও display: flexপাত্রে অভ্যন্তরীণে এলিপিসিসটি কাজ করার চেষ্টা করতে আপনার সমস্যা হচ্ছে , min-width: 0আপনি ইতিমধ্যে এটির সেট করে রেখেছেন overflow: hiddenএবং এটি আপনার জন্য কীভাবে কাজ করে তা দেখুন এটির পিতামাতাকে উপচে পড়া সর্বাধিক ধারকটিতে যুক্ত করার চেষ্টা করুন ।

আজ-ফস্টার দ্বারা এই কোডেপেনে আরও বিশদ এবং কার্যকারী উদাহরণ । পুরোপুরি আমার ক্ষেত্রে কৌশলটি করেছেন did

Comments

দুর্দান্ত সমাধান - এটি এখানে পোস্ট করা একমাত্র পাত্র position: stickyযা display: flexপাত্রে থাকা কোনও উপাদানটির জন্য কাজ করে ।

— জেমস ডিনসডেল

আমি মনে করি এটি নির্বাচিত উত্তরের অন্তর্ভুক্ত করা উচিত। এটি আমার সমস্যা সমাধান করেছে। ধন্যবাদ!

— j0nd0n7

আপনি স্যার, একটি প্রতিভা।

— নাথান ওসমান

ধন্যবাদ মানুষ, দিনটি বাঁচিয়েছে

— ছাতা

Answer 4

এছাড়াও নিশ্চিত word-wrapসেট করা হয় স্বাভাবিক IE10 জন্য এবং নীচের।

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

সুতরাং আমার ক্ষেত্রে, ব্রেক-ওয়ার্ডেword-wrap সেট করা হয়েছিল (উত্তরাধিকারসূত্রে বা ডিফল্টরূপে?) এফএফ এবং ক্রোমে কাজ করার কারণে , তবে আইই তে নয়।text-overflow

ওয়ার্ড-মোড়ানো সম্পত্তি সম্পর্কে এমএস তথ্য

Answer 5

anchor, span... ট্যাগগুলি ডিফল্টরূপে ইনলাইন উপাদান হয়, ইনলাইন উপাদানগুলির ক্ষেত্রে widthসম্পত্তি কাজ করে না। সুতরাং আপনাকে আপনার উপাদানকে হয় inline-blockবা block levelউপাদানগুলিতে রূপান্তর করতে হবে

Answer 6

উপবৃত্তির কাজ করার জন্য তথ্যের পরে লেখা চারটি লাইন অন্তর্ভুক্ত করুন

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Answer 7

যোগ করুন display: block;বা display: inline-block;আপনার#User_Apps_Content .DLD_App a

ডেমো

Comments

আমি সবেমাত্র যাচাই করেছি এবং এটি কেটে ফেলা হচ্ছে: /

— জ্ঞান

Answer 8

আপনি কেবল একটি লাইন সিএসএস যুক্ত করুন:

.app a {
   display: inline-block;
}

Answer 9

ইন বুটস্ট্র্যাপ 4 , আপনি একটি যোগ করতে পারেন .text-truncateএকটি ঊহ্য শব্দ পাঠ্য অগ্রভাগ ছাঁটিয়া শ্রেণী।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Answer 10

অবশ্যই থাকতে হবে

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

থাকতে হবে না

display: inline

থাকতে হবে

position: sticky

Answer 11

আপনি ভাসা যোগ করতে পারেন: বাম; এই শ্রেণীর ভিতরে # ব্যবহারকারীর_অ্যাপস_সন্টেন্ট .ডিএলডি_অ্যাপ এ

Answer 12

প্রতিক্রিয়াশীল হওয়ার জন্য আমাকে কিছু দীর্ঘ বিবরণ উপবৃত্ত করতে হয়েছিল (কেবলমাত্র একটি লেন নেওয়া), সুতরাং আমার সমাধানটি ছিল পাঠ্যটি মোড়ানো (পরিবর্তে white-space: nowrap) এবং স্থির প্রস্থের পরিবর্তে আমি স্থির উচ্চতা যুক্ত করেছি:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Answer 13

এটি সেই কোড যা অনুমতি দেয়:

overflow: hidden;
text-overflow: ellipsis;

ওভারফ্লো: লুকানো প্রয়োজন

Answer 14

আমি একই সমস্যার মুখোমুখি হয়েছি এবং মনে হচ্ছে উপরের সমাধানগুলির কোনওটি সাফারির পক্ষে কাজ করে না। সাফারি নন ব্রাউজারের জন্য, এটি ঠিক কাজ করে:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

সাফারির জন্য, এটিই আমার পক্ষে কাজ করে। নোট করুন যে ব্রাউজারটি সাফারি কিনা তা যাচাই করার জন্য মিডিয়া ক্যোয়ারী সময়ের সাথে সাথে পরিবর্তিত হতে পারে, সুতরাং মিডিয়া ক্যোয়ারীটি যদি আপনার পক্ষে কাজ না করে তবে কেবল তার সাথে টিঙ্কার করুন। সঙ্গে line-clampসম্পত্তি, এটি ঊহ্য শব্দ সঙ্গে ওয়েব একাধিক লাইন আছে সম্ভব হবে দেখতে এখানে ।

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

Answer 15

https://stackoverflow.com/a/53784508/5626747

খ্যাতির কারণে মন্তব্য করতে পারি না, তাই আমি আরও একটি উত্তর দিচ্ছি:

display: block;এক্ষেত্রে আপনাকে যে উপাদানটি চালু করেছেন তা থেকে আপনাকে সাধারণত প্রস্তাবিত সম্পত্তিটিও সরিয়ে ফেলতে text-overflow: ellipsis;হবে, বা এটি শেষে ... কেটে ফেলা হবে।

Answer 16

আপনার সিএসএস নিয়মে এগুলি লিখুন।

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Comments

আপনি এর মাধ্যমেও দেখতে পারেন, jsfiddle.net/ManiAanand/5v6pfy9w

— মণি আবি আনন্দ

প্রস্থ নির্দিষ্ট করা যেতে পারে আমার উত্তর ভুল না করে। আপনি কেবলমাত্র আমার উত্তরে ডিসপ্লে ব্লক যুক্ত করেছেন, আমি একটি স্নিপেট লিখেছি, পুরো কোডগুলি নয়, তাই অন্যান্য জিনিস যুক্ত করা যায় তবে সমস্যার সাথে কিছু করার নেই !! আমার উত্তরটি কীভাবে সঠিক নয় তা দয়া করে নির্দিষ্ট করতে পারেন?

— সিরাজ আলম

ডিসপ্লে পাশাপাশি প্রস্থ নির্দিষ্ট করা প্রয়োজন। প্রস্থটি যদি শতকরা একভাগ বা অনির্ধারিত এবং হার্ড ইউনিটগুলিতে সেট না করা হয় তবে ওভারফ্লো বাধা হবে না এবং এটি কাজ করবে না। গৃহীত উত্তর দেখুন।

— jlesse

প্রস্থ ইতিমধ্যে অপেপ দ্বারা সেট করা হয়েছে। আমি তার কোডগুলিতে যোগ করার জন্য স্নিপেট দিয়েছি

— সিরাজ আলম