จำกัดความยาวของข้อความถึง n บรรทัดโดยใช้ CSS

เป็นไปได้หรือไม่ที่จะจำกัดความยาวของข้อความไว้ที่ "n" บรรทัดโดยใช้ CSS (หรือตัดมันเมื่อล้นในแนวตั้ง)

text-overflow: ellipsis; ใช้ได้กับข้อความ 1 บรรทัดเท่านั้น

ข้อความต้นฉบับ:

Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt
elit purus lectus, หรือสิ่งอื่นใด, องค์ประกอบของสิ่งที่
คุณต้องการ! นั่งเฉยๆ! การใช้งานของ turpis กับเพลงนี้
! Dapibus sed aenean, magna sagittis, lorem velit

ผลลัพธ์ที่ต้องการ (2 บรรทัด):

Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt
elit purus lectus, หรือสิ่งอื่น ๆ ...

มีวิธีที่จะทำโดยใช้ไวยากรณ์ของเส้นยึดที่ไม่เป็นทางการและเริ่มต้นด้วย Firefox 68 มันทำงานได้ในเบราว์เซอร์ที่สำคัญทั้งหมด

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

ถ้าคุณไม่สนใจเกี่ยวกับผู้ใช้ IE ก็ไม่จำเป็นต้องทำline-heightและmax-heightเลือก

สิ่งที่คุณสามารถทำได้มีดังต่อไปนี้:

.max-lines {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

ที่max-height:= line-height:× ใน<number-of-lines>em

วิธีแก้ปัญหาการทำงานข้ามเบราว์เซอร์

ปัญหานี้ได้รับการรบกวนเรามานานหลายปี

เพื่อช่วยในทุกกรณีฉันได้วางแนวทาง CSS เท่านั้นและแนวทาง jQuery ในกรณี cats caveats เป็นปัญหา

นี่เป็นวิธีแก้ปัญหาCSS เพียงอย่างเดียวที่ฉันใช้ในการทำงานในทุกสถานการณ์ด้วยข้อแม้เล็กน้อย

พื้นฐานง่าย ๆ มันซ่อนการล้นของช่วงและตั้งค่าความสูงสูงสุดตามความสูงของเส้นตามที่แนะนำโดย Eugene Xa

จากนั้นก็มีคลาสหลอกหลังจาก div ที่บรรจุไว้ซึ่งวางจุดไข่ปลาไว้อย่างดี

คำเตือน

วิธีการแก้ปัญหานี้จะวางจุดไข่ปลาเสมอโดยไม่คำนึงถึงว่ามีความต้องการมันหรือไม่

หากบรรทัดสุดท้ายลงท้ายด้วยประโยคลงท้ายคุณจะลงท้ายด้วยจุดสี่จุด ...

คุณจะต้องมีความสุขกับการจัดข้อความชิดขอบ

จุดไข่ปลาจะอยู่ทางขวาของข้อความซึ่งอาจดูเลอะเทอะ

รหัส + ตัวอย่าง

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */

<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

วิธีการ jQuery

ในความคิดของฉันนี้เป็นทางออกที่ดีที่สุด แต่ทุกคนไม่สามารถใช้ JS โดยพื้นฐานแล้ว jQuery จะตรวจสอบองค์ประกอบ. text ใด ๆ และหากมีตัวอักษรมากเกินกว่าค่าสูงสุดที่กำหนดไว้ล่วงหน้าก็จะตัดส่วนที่เหลือออกและเพิ่มจุดไข่ปลา

ไม่มีข้อควรระวังสำหรับวิธีการนี้ แต่ตัวอย่างรหัสนี้มีไว้เพื่อแสดงให้เห็นถึงแนวคิดพื้นฐานเท่านั้น - ฉันจะไม่ใช้สิ่งนี้ในการผลิตโดยไม่ปรับปรุงด้วยเหตุผลสองประการ:

1) มันจะเขียน html ภายในของ. elems แบบข้อความ ไม่ว่าจะจำเป็นหรือไม่ 2) ไม่มีการทดสอบเพื่อตรวจสอบว่า html ด้านในไม่มี elems ซ้อนกันดังนั้นคุณจึงต้องพึ่งพาผู้เขียนมาก ๆ ในการใช้. text อย่างถูกต้อง

แก้ไข

ขอบคุณสำหรับการจับ @markzzz

รหัส & ตัวอย่าง

jsfiddle

setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->

เท่าที่ฉันเห็นนี่เป็นไปได้ที่จะใช้ แต่เพียงอย่างเดียวheight: (some em value); overflow: hiddenและถึงอย่างนั้นมันก็จะไม่มีความแฟนซี...ในตอนท้าย

ถ้านั่นไม่ใช่ตัวเลือกฉันคิดว่ามันเป็นไปไม่ได้หากไม่มีการประมวลผลล่วงหน้าด้านเซิร์ฟเวอร์ (ยากเพราะโฟลว์ข้อความไม่สามารถทำนายได้อย่างน่าเชื่อถือ) หรือ jQuery (เป็นไปได้ แต่อาจซับซ้อน)

วิธีการแก้ปัญหาจากหัวข้อนี้คือการใช้ jQuery Plugin dotdotdot ไม่ใช่โซลูชัน CSS แต่ให้ตัวเลือกมากมายสำหรับลิงก์ "อ่านเพิ่มเติม" การปรับขนาดแบบไดนามิกเป็นต้น

คลาส CSS ต่อไปนี้ช่วยฉันในการรับจุดไข่ปลาสองบรรทัด

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }

ปัจจุบันคุณไม่สามารถทำได้ แต่ในอนาคตคุณจะสามารถใช้งานtext-overflow:ellipis-lastlineได้ ขณะนี้สามารถใช้งานได้กับคำนำหน้าผู้จัดจำหน่ายใน Opera 10.60+: ตัวอย่าง

ฉันมีวิธีแก้ปัญหาที่ใช้งานได้ดี แต่ใช้จุดไล่ระดับสีแทนการไล่ระดับสี มันทำงานได้เมื่อคุณมีข้อความแบบไดนามิกเพื่อให้คุณไม่ทราบว่ามันจะนานพอที่จะต้องใช้วงรี ข้อดีคือคุณไม่ต้องทำการคำนวณ JavaScript ใด ๆ และใช้งานได้กับคอนเทนเนอร์ความกว้างผันแปรรวมถึงเซลล์ตารางและข้ามเบราว์เซอร์ มันใช้สอง divs พิเศษ แต่มันง่ายมากที่จะใช้

มาร์กอัป:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

โพสต์บล็อก: http://salzerdesign.com/blog/?p=453

หน้าตัวอย่าง: http://salzerdesign.com/test/fade.html

.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

ฉันชอบไลน์แคลมป์ แต่ยังไม่มีการสนับสนุนสำหรับ firefox เลย .. ดังนั้นฉันจึงคำนวณทางคณิตศาสตร์และซ่อนการโอเวอร์โฟลว์

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

ตอนนี้สมมติว่าคุณต้องการลบและเพิ่มคลาสนี้ผ่านทาง jQuery พร้อมกับลิงก์คุณจะต้องมีพิกเซลพิเศษดังนั้นความสูงสูงสุดจะเป็น 63 px นี่เป็นเพราะคุณต้องตรวจสอบทุกครั้งหากความสูงมากกว่า 62px แต่ในกรณีของ 4 บรรทัดคุณจะได้รับจริงเท็จดังนั้นพิกเซลพิเศษจะแก้ไขปัญหานี้และจะไม่สร้างปัญหาเพิ่มเติมใด ๆ

ฉันจะวาง coffeescript สำหรับสิ่งนี้เพื่อเป็นตัวอย่างใช้ลิงค์ที่ซ่อนอยู่โดยปริยายโดยคลาสจะอ่านมากขึ้นและอ่านน้อยลงมันจะลบสิ่งที่โอเวอร์โฟลไม่จำเป็นและลบเนื้อหา - คลาสโอเวอร์โฟลว์

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

หากคุณต้องการที่จะมุ่งเน้นไปที่letterคุณสามารถทำเช่นนั้นฉันหมายถึงคำถามนี้

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

หากคุณต้องการที่จะมุ่งเน้นไปที่wordคุณสามารถทำเช่น + พื้นที่

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join(' ') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

หากคุณต้องการที่จะมุ่งเน้นไปที่wordคุณสามารถทำเช่นนั้น + โดยไม่ต้องเว้นวรรค

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        Array.prototype.slice.call(title).reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join('') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

รหัสตัวอย่างพื้นฐานการเรียนรู้ที่จะใช้รหัสเป็นเรื่องง่าย ตรวจสอบความคิดเห็น CSS สไตล์

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>

ฉันได้รับการมองไปรอบ ๆ นี้ แต่แล้วฉันก็รู้ว่าเว็บไซต์ของฉันใช้ php ประณาม !!! ทำไมไม่ใช้ฟังก์ชั่นการตัดแต่งในการป้อนข้อความและเล่นกับความยาวสูงสุด ...

นี่เป็นทางออกที่เป็นไปได้เช่นกันสำหรับผู้ที่ใช้ php: http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>