সিএসএসে সর্বাধিক অক্ষরের দৈর্ঘ্য নির্ধারণ করা হচ্ছে

Question

আমি স্কুলের জন্য প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করছি এবং আমার প্রশ্নটি হ'ল:

আমি কীভাবে আমার ওয়েবসাইটে বাক্যগুলির সর্বাধিক অক্ষরের দৈর্ঘ্য নির্ধারণ করব (সিএসএস সহ) 75৫ টি অক্ষরের মতো) যে যখন আমার খুব বড় পর্দা থাকে, তখন বাক্যগুলি characters৫ টি অক্ষরের চেয়ে বেশি যায় না।

আমি সর্বাধিক প্রস্থের চেষ্টা করেছি কিন্তু এটি আমার লেআউটটি মিস করে। আমি এটিকে প্রতিক্রিয়াশীল করতে ফ্লেক্সবক্স এবং মিডিয়া প্রশ্নগুলি ব্যবহার করছি।

Comments

যদি আপনার ব্যবহার হয় textareaবা inputতাদের পক্ষে সর্বোচ্চ দৈর্ঘ্য ( maxlength="50"এটি এইচটিএমএলটিতে থাকে) সম্পত্তি হয় বা আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। এছাড়াও আমি মনে করি আমি এটি ভুলভাবে পড়েছি, প্রস্থ নির্ধারণ করা বাক্যটিকে শেষ লাইনে পড়লে পরবর্তী লাইনে ফেলে দিতে বাধ্য করবে। এটি ডিফল্ট আচরণ।

— রুডি

এটি একবার দেখুন: stackoverflow.com/questions/20552957/… - এটি সিএসএস এল্লিসিস, এটি আপনাকে সাহায্য করতে পারে

— ড্যারেন সুইভিনে

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

— প্যাট্রিক লিভার

এ জাতীয় সীমা নির্ধারণের অর্থ কী? অতিক্রম করলে কী হবে? "বাক্য" বলতে কী বোঝ? এটি কোনও সিএসএস ধারণা নয়। আপনি কীভাবে বাক্যগুলি চিনতে বা চিহ্নিত করতে চান? অথবা আপনি আসলে লাইন দৈর্ঘ্য বলতে চান ? আপনি যদি করেন, এটি আপনার সমস্যা কি? সাধারণত আপনি যদি এটি প্রতিরোধের জন্য বিশেষ কাজ না করেন তবে পাঠ্য স্বয়ংক্রিয়ভাবে মোড়ানো হয়।

— Jukka K. Korpela 14

Answer 1

আপনি সর্বদা একটি কাটা পদ্ধতি ব্যবহার করতে পারেন max-widthএবং এটির ellipsisমতো ওভারফ্লো সেট করে

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

একটি উদাহরণ: http://jsfiddle.net/3czeyznf/

একটি বহু লাইন কাটা জন্য একটি flexসমাধান দেখুন। 3 টি সারি কাটা একটি উদাহরণ।

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

উদাহরণ: https://codepen.io/srekoble/pen/EgmyxV

Comments

ধন্যবাদ, আমি উপবৃত্তির ব্যবহার বুঝতে পারি তবে আমি দেখতে পাচ্ছি না এটি কীভাবে আমার সমস্যার সমাধান করে। আমি মনে করি যে স্ক্রিনটি যখন ছোট হবে তার জন্য উপবৃত্তাকারটি ঠিক আছে তবে যখন এটি আরও বড় হবে আমি এটি 75 টি অক্ষরে এটি কেটে দিতে চাই। সুতরাং @ জিন-লুক বিবৃতি দিচ্ছেন, জাভাস্ক্রিপ্ট দিয়ে এটিই সম্ভব? দুঃখিত আমি কোডিংয়ে নতুন

— শরীফ 1111

আপনার টাইপোগ্রাফি অনুসারে 75 টি অক্ষর স্থান কী ঘটে তা আপনি দেখতে পেলেন এবং সেই অনুযায়ী সর্বাধিক প্রস্থ নির্ধারণ করতে পারেন। দুর্ভাগ্যক্রমে আপনি অক্ষর অনুসারে একটি বাক্য কাটাতে কোনও CSS সম্পত্তি সেট করতে পারবেন না। বিকল্প হিসাবে আপনি সারি অনুসারে কাটা পদ্ধতি নির্দিষ্ট করতে পারেন সেই সুবিধার সাথে একটি নমনীয় কাটা পদ্ধতি ব্যবহার করতে পারেন।

— ভ্যাঞ্জেল টিজো

এটি অনুচ্ছেদের প্রস্থকে প্রভাব দেয়, বাক্য দৈর্ঘ্য নয়। এবং 200px অক্ষরের দিক থেকে কেবল যে কোনও কিছু হতে পারে (এটির উপর নির্ভর করে আপনার অনেকগুলি আই বা অনেকগুলি ডাব্লু'র এবং ফন্টের মুখ এবং আকারের উপরও রয়েছে)।

— Jukka K. Korpela 14

তুমি ঠিক সে কথা বলছ। Paulie_D উত্তর চেক আপনার সমাধান সঠিক এক মনে করা হয়

— Vangel Tzo

@ ভ্যাঞ্জেলটিজো এটি কেবল একটি লাইনের জন্য। একাধিক লাইনের জন্য এটি করা যায়? ধন্যবাদ

— বিশ্বাস

Answer 2

এর একটি সিএসএসের 'দৈর্ঘ্যের মান' রয়েছে ch।

এমডিএন থেকে

এই ইউনিটটি উপাদানটির ফন্টে গ্লাইফ '0' (শূন্য, ইউনিকোড অক্ষর ইউ + 0030) এর প্রস্থ বা আরও স্পষ্টভাবে অগ্রিম পরিমাপের প্রতিনিধিত্ব করে।

এটি আপনার পরে কী হতে পারে আনুমানিক।

p {
  overflow: hidden;
  max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

Comments

এটি কি কোনও ব্রাউজার দ্বারা প্রয়োগ করা হয়েছে? আমার পক্ষে মোটেও কাজ করছে বলে মনে হচ্ছে না। সম্পাদনা: এখনও খসড়া dev.w3.org/csswg/css-values/#lengths

— বীট

আমি মনে করি আমি আপনার উত্তরটি নিয়ে যাব, আমি মনে করি যদি আমি সর্বাধিক প্রস্থ নির্ধারণ করি: 30 ম; এটি আমার জন্য যথেষ্ট। ধন্যবাদ!

— শরীফ 1111

এমডিএন-তে সামঞ্জস্যতা সারণী সম্পর্কে নিশ্চিত নয় ... তবে এটি ( chইউনিট) ক্রোম 50, আইই 11 বা এফএফ 45 এ আমার জন্য (প্রত্যাশার মতো) কাজ করে না বলে মনে হচ্ছে ?!

— মিঃ হোয়েট

হ্যাঁ, আমার @ w3dk এর মতোই ফলাফল হচ্ছে। আমি ঠিক একটি heightএবং সেট overflow:hidden। আমি উপবৃত্তের মতো করেছিলাম, তবে আমি সেট করলেই এটি কাজ করতে সক্ষম হয়েছি white-space:no-wrap। আমার ক্ষেত্রে, পাঠ্যটি মোড়তে পারে, কেবল তার ধারকটির মধ্যে নির্দিষ্ট চর সীমা অতিক্রম করা উচিত নয়।

— ক্রিস 22

কেন এটিতে এত বেশি ভোট রয়েছে তা নিশ্চিত নয় কারণ এটি পরিষ্কারভাবে অসম্পূর্ণ এবং প্রদত্ত কোডের সাথে কাজ করছে না। আপনাকে যুক্ত করতে হবেwhite-space: nowrap;

— কেভিন এম

Answer 3

অক্ষরকে সর্বাধিক প্রস্থে সেট করার পরে এটি কাটানোর জন্য চেষ্টা করুন। আমি এই ক্ষেত্রে 75ch ব্যবহার করেছি

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

মাল্টলাইন কাটানোর জন্য, লিঙ্কটি অনুসরণ করুন।

উদাহরণ: https://codepen.io/srekoble/pen/EgmyxV

আমরা এর জন্য ওয়েবকিট সিএসএস ব্যবহার করব। সংক্ষেপে ওয়েবকিট একটি সাফারি / ক্রোমের জন্য একটি এইচটিএমএল / সিএসএস ওয়েব ব্রাউজার রেন্ডারিং ইঞ্জিন। এটি প্রতিটি ব্রাউজারকে এইচডিএমএল / সিএসএস ওয়েব পৃষ্ঠা আঁকার জন্য কোনও রেন্ডারিং ইঞ্জিন দ্বারা সমর্থিত হওয়ায় এটি ব্রোয়ার নির্দিষ্ট হতে পারে।

Comments

পাঠ্যটি মনোস্পিড করা

— ফ্যাব্রিজিও ক্যাল্ডেরান

এখানে সেরা উত্তর। বিশেষত কারণ আপনি এমনকি মাল্টলাইন ট্রাঙ্কটিংয়ের কথাও উল্লেখ করেছেন;) যাইহোক, যদি কোনও মাল্টলাইন বিকল্পের max-width:100%;জন্য যায় তবে আপনি মোড়কের ডিভিওয়ের জন্য একটি ব্যবহার করতে পারেন । সুতরাং আপনার কাছে একটি প্রতিক্রিয়াশীল কাটা আছে।

— xarlymg89

Answer 4

উদাহরণ কোড:

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>

    

Answer 5

Chrome এর সাহায্যে আপনি " -webkit-line-clamp " দিয়ে প্রদর্শিত লাইনের সংখ্যা সেট করতে পারেন :

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

সুতরাং আমার জন্য এটি কোনও এক্সটেনশনে ব্যবহার করা তাই এটি নিখুঁত, আরও তথ্য এখানে: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-traight-up -broken-865413f16e5

Answer 6

সিএসএসের মাধ্যমে এটি সম্ভব নয়, আপনাকে এর জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। যদিও আপনি পি এর প্রস্থটিকে 30 টির মতো অক্ষরে সেট করতে পারেন এবং পরবর্তী অক্ষরগুলি স্বয়ংক্রিয়ভাবে নেমে আসবে তবে আবার এটি এতটা সঠিক হবে না এবং অক্ষরগুলি মূলধন হলে আলাদা হবে will

Comments

আরও ভাল আপনার @ ভ্যাঞ্জেলটজোর উত্তরটি পরীক্ষা করা উচিত

— বেনজামিন

আপনি পুরোপুরি ঠিক বলেছেন জিন-লুক, @ ভ্যাঞ্জেলটিজো একটি কার্যনির্বাহী তবে কোনও কাউট কন্ট্রোল মোটেও সরবরাহ করে না।

— গিলাইম ফে

এটি সঠিক উত্তর - আপনি CSS এর অক্ষর গণনা অনুসারে টুইট করতে পারবেন না। আপনার জেএস ব্যবহার করা দরকার।

— সেরোসায়েস

Answer 7

এইচটিএমএল

<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>

jQuery এর

var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

সিএসএস

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

ফলাফল

আপনার পছন্দসই কাজটি করতে পারবেন না। আপনার নিজের লিগল, ম্যাসেজ এবং ...

Jsfiddle

Comments

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

— ই

এটি সর্বোত্তম উত্তর কারণ এটি উচ্চতা এবং ঠিক প্রস্থকেও সম্বোধন করে না। ভাল করেছ!

— গ্রাস্পার

প্রশ্নটি একটি সিএসএস সমাধান চাইবে।

— ড্রাইলিফ

Answer 8

মাল্টি লাইনের অক্ষরগুলি কাটাতে খাঁটি সিএসএস সমাধান

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

আমি এটি পরীক্ষা করেছি এবং এটি পুরোপুরি কার্যকর হয়। আশা করি কেউ জেএস বা সার্ভার পাশের বিকল্পগুলি বেছে নেওয়ার আগে এটি দরকারী বলে মনে করছেন

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

Answer 9

আধুনিক সিএসএস গ্রিড উত্তর

কোডপেনে পুরোপুরি কার্যকরী কোড দেখুন । নিম্নলিখিত এইচটিএমএল দেওয়া হয়েছে:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

আপনি তিনটি কলাম তৈরি করতে সিএসএস গ্রিড ব্যবহার করতে পারেন এবং মাঝারি কলামটির জন্য আমাদের প্যারাগ্রন্থটি ধারণ করে সর্বাধিক 70 অক্ষরের প্রস্থ নিতে ধারককে বলতে পারেন।

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

এটি দেখতে দেখতে এটি দেখতে ( পুরোপুরি কার্যকারী উদাহরণের জন্য চেকআউট কোডপেন ):

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

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

Comments

বুঝতে পারিনি যে আপনি chকলামগুলিতে ব্যবহার করতে পারবেন । বাহ।

— উইল

এছাড়াও বিষয়টিকে বিবেচনা করে আপনার পেনের আইডিটি বেশ মিষ্টি rrdOvr। ;)

— উইল

Answer 10

এই পোস্টটি একটি সিএসএস সমাধানের জন্য, তবে পোস্টটি বেশ পুরানো, সুতরাং অন্যরা যদি এতে হোঁচট খায় এবং একটি আধুনিক জেএস ফ্রেমওয়ার্ক যেমন অ্যাঙ্গুলার 4+ ব্যবহার করছে, তবে কৌনিক পাইপগুলির মাধ্যমে এটি করার সহজ উপায় আছে সিএসএস নিয়ে গণ্ডগোল

এটি করার জন্য সম্ভবত "প্রতিক্রিয়া" বা "ভ্যু" উপায় রয়েছে। এটি কেবল একটি ফ্রেমওয়ার্কের মধ্যে কীভাবে এটি করা যেতে পারে তা প্রদর্শনের জন্য।

আরোপ করা-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

Answer 11

2 টি বিভিন্ন উপায়ে আমার সমাধান চেষ্টা করুন।

<div class="wrapper">
      <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}