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




javascript (7)

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

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

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

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

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

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

p {
  grid-column: 2 / 3;
}

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

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

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


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

অক্ষরকে সর্বাধিক প্রস্থে সেট করার পরে এটি কাটানোর জন্য চেষ্টা করুন। আমি এই ক্ষেত্রে 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

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


আপনি সর্বদা ellipsis মতো 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


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

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

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

  /* 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;
}

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

এমডিএন থেকে

এই ইউনিটটি উপাদানটির ফন্টে গ্লাইফ '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>


এইচটিএমএল

<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





text