দ্বিতীয় লাইনে সিএসএস উপবৃত্ত

Question

text-overflow: ellipsisদ্বিতীয় লাইনে সিএসএস , এটি কি সম্ভব? নেটে খুঁজে পাচ্ছি না।

উদাহরণ:

আমি যা চাই তা হ'ল:

I hope someone could help me. I need 
an ellipsis on the second line of...

তবে যা হচ্ছে তা হ'ল:

I hope someone could help me. I ... 

Comments

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

— ফারলিগঅ্যাপ্ট্রেডেন

এখানে একটি অনুরূপ প্রশ্ন: স্ট্যাকওভারফ্লো.com

— এভজেনি

tl; dr: এটি কেবল ওয়েবকিটেই সম্ভব

— ইভজেনি

আমি এটি অর্জন করতে সবচেয়ে কাছাকাছি হ'ল উপবৃত্তের জন্য একটি 'পরে' সিউডো-উপাদান যুক্ত করে পাঠ্যযুক্ত উপাদানটির সরাসরি পরে এটি ইনলাইন অবস্থিত করেছিলাম। তবে এলিপিসিস অদৃশ্য হয়ে যায় যদি উপাদানটির পাঠ্যটি খুব দীর্ঘ হয় তবে এটি নির্ভরযোগ্য করে তোলার জন্য আপনাকে পাঠ্যটি কোনওভাবে ছাঁটাইতে হবে।

— জোনাথন

Answer 1

জন্য একটি প্রয়োজন text-overflow: ellipsis;কাজ এক লাইনের সংস্করণ white-space( pre, nowrapইত্যাদি)। যার অর্থ পাঠ্যটি কখনই দ্বিতীয় লাইনে পৌঁছায় না।

অতএব। খাঁটি সিএসএসে সম্ভব নয়।

আমার উত্স যখন আমি এখনই ঠিক একই জিনিসটির সন্ধান করছিলাম : http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

সম্পাদনা করুন যদি ভাল সিএসএস দেবতারা http://www.w3.org/TR/css-overflow-3/#max-lines বাস্তবায়ন করে তবে আমরা খাঁটি সিএসএসে fragments(নতুন) এবং max-lines(নতুন) ব্যবহার করতে পারি । এছাড়াও http://css-tricks.com/line-clampin/- এ আরও কিছু তথ্য

সম্পাদনা 2 ওয়েবকিট / ব্লিঙ্ক রয়েছে line-clamp: 2-webkit-line-clamp: 2 য় লাইনে উপবৃত্ত স্থাপন করবে।

Comments

একটি নজর রাখা, তবে এখনও অবধি

— ড্যানিয়েল

সাশের সাথে উপরের বৈশিষ্ট্যটি কীভাবে অর্জন করবেন? @ রুডি

— ভূমি ভালানী

Answer 2

ওয়েবকিট ব্রাউজারগুলিতে এটি কাজ করা উচিত :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Comments

মনে রাখবেন, এই মন্তব্য হিসাবে, -webkit-line-clamp দৃশ্যমানতার সম্মান দেয় না: লুকানো। bugs.webkit.org/show_bug.cgi?id=45399

— কেভিন

আরে - দেখতে সুন্দর লাগছে তবে আমার পক্ষে কাজ করে না। এটি কেবল প্রদত্ত লাইন-ক্ল্যাম্পে '...' রাখে তবে বাকী

— টুকরোটি কাটেনি

overflow: hiddenএটি কাজ করার জন্য আপনার যুক্ত করতে হতে পারে ।

— রবার্ট

এটি ফায়ারফক্সে কাজ করবে না, জেকো ইঞ্জিনে ওয়েবকিট সমর্থিত নয়

— জেটপাআর

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আপনি এটিকে যে কোনও উপাদানটিতে প্রয়োগ করেন তার নীচের অংশে কোনও প্যাডিং চান না, কারণ আপনি বাকীটি উঁকি মারছেন get

— Tr1stan

Answer 3

অন্যরা ইতিমধ্যে উত্তর হিসাবে, একটি খাঁটি সিএসএস সমাধান বিদ্যমান নেই। একটি jQuery প্লাগইন রয়েছে যা ব্যবহার করা খুব সহজ, একে ডটডটডট বলা হয় । এটি কলের ধারক এবং প্রস্থ এবং উচ্চতা ব্যবহার করে গণনা করতে এটি কাটা এবং উপবৃত্ত যোগ করার প্রয়োজন হয় কিনা।

$("#multilinedElement").dotdotdot();

এখানে একটি জেএসফিডাল ।

Comments

এই প্লাগইনটি "আরও পড়ুন" লিঙ্ক যুক্ত করার মতো প্রচুর অন্যান্য ইউটিলিটি সরবরাহ করে, এটি ইউআরআই এবং এইচটিএমএল মার্কআপকেও পার্স করতে পারে। গুড ফাইন্ড!

— মার্টিন অ্যান্ডারসন

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

— thdoan

ইস্টি বাস্তবায়িত এবং সুন্দরভাবে কাজ করে। ধন্যবাদ!

— রাচেল এস

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

— boyomarinov

এছাড়াও, এটি লোড করার পরে পাঠ্যটি পরিবর্তনশীলভাবে পরিবর্তিত হলে কাজ করবে না :(

— ডিজেল

Answer 4

আমি দেখেছি যে সাইক্পের উত্তর যথেষ্ট ছিল না এবং এটির জন্য একটি overflowস্টাইলও প্রয়োজন :

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

Answer 5

যদি কেউ এসএএসএস / এসসিএসএস ব্যবহার করে এবং এই প্রশ্নটিতে হোঁচট খায় - সম্ভবত এই মিশ্রণটি সহায়ক হতে পারে:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

এটি কেবল ওয়েবকিট ব্রাউজারগুলিতে উপবৃত্তিকে যুক্ত করে। বিশ্রাম শুধু এটি কাটা।

Comments

কম ব্যবহার করে, আমাকে পরিবর্তন /* autoprefixer: off */করতে হয়েছিল /*! autoprefixer: off */অন্যথায় -webkit-box-orient: vertical;সংকলনের পরে মুছে ফেলা হচ্ছে যার অর্থ উপবৃত্ত কখনও দেখায় নি

— নাথান

Answer 6

এটি সমর্থনকারী ব্রাউজারগুলির জন্য কেবল লাইন-ক্ল্যাম্প ব্যবহার করুন (বেশিরভাগ আধুনিক ব্রাউজারগুলি) এবং পুরানোদের জন্য 1 লাইনে ফিরে যান।

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

Comments

সাদা-স্থান: প্রাথমিক; আমাকে বাঁচিয়েছিলেন

— জেমস

Answer 7

কী লজ্জাজনক যে আপনি দুটি লাইনে কাজ করতে পারবেন না! যদি উপাদানটি প্রদর্শন ব্লক হয় এবং এর উচ্চতা 2 ম 2 বা কোনও কিছুতে সেট করা থাকে, এবং পাঠ্যটি উপচে পড়লে এটি উপবৃত্ত প্রদর্শিত হবে!

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

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

একাধিক লাইনের জন্য আপনি পলফিল যেমন jQuery অটোলেপসিস ব্যবহার করতে পারেন যা গিথুব http://pvdspek.github.com/jquery.autoellipsis/ এ রয়েছে

Comments

যে প্লাগিনটি এটি করে তার পক্ষে খুব ভারী। এটি 5 বছর বয়সী। বরং dotdotdotঅন্য পোস্টে উল্লিখিত ব্যবহার করুন ।

— adi518

Answer 8

আমি জেএস সমর্থক নই, তবে আপনি এটি করতে পারেন এমন কয়েকটি উপায় আমি খুঁজে বের করেছি।

এইচটিএমএল:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

তারপরে jQuery এর সাহায্যে আপনি এটি একটি নির্দিষ্ট অক্ষর গণনায় ছাঁটাই করে শেষ শব্দটি এভাবে ছেড়ে যান:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

ফলাফলটি এরকম দেখাচ্ছে:

আপনার পছন্দসই কাজটি করতে পারবেন না। আমদানি
উপাদান consequat তাপমাত্রা এবং ...

অথবা, আপনি কেবল এটির মতো নির্দিষ্ট চরিত্রের গণনায় এটি ছাঁটাই করতে পারেন:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

ফলাফলটি এরকম দেখাচ্ছে:

আপনার পছন্দসই কাজটি করতে পারবেন না। আমদানি
উপাদান consequat তাপমাত্রা এবং পারফরমেন্স ...

আশা করি যে কিছুটা সাহায্য করবে।

এখানে jsFizz আছে ।

Answer 9

খাঁটি সিএসএসে এখানে উদাহরণ রয়েছে।

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Comments

খুব ভাল সমাধান, এটি কেবল পাঠ্যগুলি কেটে ফেলেছে এমনকি যদি দ্বিতীয় লাইনটি কেটে ফেলা খুব ছোট হয় তবে এখনও থাম্বস আপ হয়

— আমিন

Answer 10

আমি এর আগে jQuery-কনডেন্স-প্লাগইন ব্যবহার করেছি যা দেখে মনে হচ্ছে এটি আপনি যা করতে পারেন তা করতে পারে। যদি তা না হয় তবে বিভিন্ন প্লাগইন রয়েছে যা আপনার প্রয়োজন অনুসারে করতে পারে।

সম্পাদনা করুন: আপনাকে একটি ডেমো বানিয়েছে - নোট করুন যে আমি jquery.condense.js কে ডেমোতে যুক্ত করেছি যা যাদু করে, তাই এই প্লাগইনটির লেখকের সম্পূর্ণ ক্রেডিট :)

Answer 11

এটি একটি মানহীন সিএসএস, যা সিএসএসের বর্তমান সংস্করণে আচ্ছাদিত নয় (ফায়ারফক্স এটি সমর্থন করে না)। পরিবর্তে জাভাস্ক্রিপ্ট ব্যবহার করার চেষ্টা করুন।

Answer 12

উপবৃত্তাকার সহ মাল্টলাইন পাঠ্য ট্রিমের বিশুদ্ধ CSS উপায়ে

ওয়েবেকিট-লাইন-ক্ল্যাম্প ভেঙে পাঠ্য ধারকটির দৈর্ঘ্য, নিয়ন্ত্রণ লাইন সামঞ্জস্য করুন: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 13

আমি আগে এই সমস্যাটি পূরণ করেছি, এবং কোনও খাঁটি CSS সমাধান নেই

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

স্ক্রিনশট, টিউটোরিয়াল, এবং ডাউনলোড লিঙ্কের জন্য http://www.samuelrossille.com/home/jstext.html এ আরও পড়ুন ।

Answer 14

যদি কেউ ফ্লেক্সবক্সে কাজ করার জন্য লাইন-ক্ল্যাম্প পাওয়ার চেষ্টা করে থাকে তবে এটি কিছুটা কৌশলযুক্ত especially এই কোড স্নিপেটে শুধুমাত্র আসল পার্থক্য হ'ল min-width: 0;কাটা টেক্সটযুক্ত ফ্লেক্স আইটেমটিতে এবং word-wrap: break-word;। অন্তর্দৃষ্টি জন্য https://css-tricks.com/flexbox-truncated-text/ এ একটি টুপি টিপ । দাবি অস্বীকার: এটি এখনও আমি জানি যতক্ষণ না ওয়েবকিট।

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (কোডপেন সংস্করণ)

Answer 15

এখানে সমস্ত উত্তর ভুল, তারা গুরুত্বপূর্ণ অংশ, উচ্চতা অনুপস্থিত

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

Answer 16

ওয়েবকিট-লাইন-ক্ল্যাম্প-এ একটি খাঁটি সিএসএস পদ্ধতির বেস, যা ওয়েবকিটে কাজ করে:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Answer 17

এটি করার কোন সত্যিকারের সহজ উপায়। Clamp.js গ্রন্থাগারটি ব্যবহার করুন ।

$clamp(myHeader, {clamp: 3});

Answer 18

আমি একটি সমাধান পেয়েছি তবে আপনাকে একটি মোটামুটি চরিত্রের দৈর্ঘ্য জানতে হবে যা আপনার পাঠ্য অঞ্চলে মাপসই হবে, তারপরে একটি ... পূর্ববর্তী স্থানটিতে যোগ দিন।

আমি যেভাবে এটি করেছি তা হ'ল:

1. মোটামুটি অক্ষরের দৈর্ঘ্য ধরে নিন (এই ক্ষেত্রে 200) এবং আপনার পাঠ্য সহ একটি ফাংশনে যান
2. স্পেসগুলি ভাগ করুন যাতে আপনার একটি দীর্ঘ স্ট্রিং থাকে
3. আপনার অক্ষরের দৈর্ঘ্যের পরে প্রথম স্থানটি "" কেটে ফেলার জন্য jQuery ব্যবহার করুন
4. বাকি যোগদান ...

কোড:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

এখানে একটি ফিজল - http://jsfiddle.net/GYsW6/1/