ฉันกำลังสร้างเว็บไซต์ที่ตอบสนองต่อโรงเรียนและคำถามของฉันคือ:

ฉันจะกำหนดความยาวอักขระสูงสุดของประโยค (ด้วย CSS) บนเว็บไซต์ของฉันได้อย่างไร (เช่น 75 ตัวอักษร) ว่าเมื่อฉันมีหน้าจอขนาดใหญ่มากประโยคจะไม่เกิน 75 ตัวอักษร

ฉันได้ลองความกว้างสูงสุดแล้ว แต่นั่นก็ทำให้เค้าโครงของฉันยุ่ง ฉันใช้คำสั่ง flexbox และคำสั่งสื่อเพื่อให้ตอบสนองได้

คุณสามารถใช้วิธีการตัดทอนได้เสมอโดยการตั้งค่า a max-widthและ overflow 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

มี CSS ch'ค่าความยาวของคือ

จาก MDN

หน่วยนี้แสดงถึงความกว้างหรือการวัดล่วงหน้าที่แม่นยำมากขึ้นของสัญลักษณ์ '0' (ศูนย์อักขระ Unicode U + 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>

ลองใช้วิธีนี้เพื่อตัดทอนอักขระหลังจากตั้งค่าเป็นความกว้างสูงสุด ฉันใช้ 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

เราจะใช้ webkit css เพื่อสิ่งนี้ กล่าวโดยย่อ WebKit เป็นเครื่องมือแสดงผลเว็บเบราว์เซอร์ HTML / CSS สำหรับ Safari / Chrome นี่อาจเป็นเบราว์เซอร์เฉพาะเนื่องจากเบราว์เซอร์ทุกตัวได้รับการสนับสนุนจากเอ็นจิ้นการแสดงผลเพื่อวาดหน้าเว็บ HTML / CSS

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

.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>

    

ด้วย 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-the-straight-up -broken-865413f16e5

ไม่สามารถทำได้ด้วย CSS คุณจะต้องใช้ Javascript เพื่อสิ่งนั้น แม้ว่าคุณสามารถตั้งค่าความกว้างของ p ได้มากถึง 30 ตัวอักษรและตัวอักษรถัดไปจะลงมาโดยอัตโนมัติ แต่อีกครั้งสิ่งนี้จะไม่ถูกต้องและจะแตกต่างกันไปหากตัวอักษรอยู่ในรูปตัวพิมพ์ใหญ่

HTML

<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)*$/, '...');
  });
}

CSS

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

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

ผลลัพธ์

Lorem ipsum dolor sit amet, consipetur adipiscing elit. Probi nig ligula, dapibus a volutpat นั่งข้างบน, แม ...

Jsfiddle

โซลูชัน CSS เพียวเพื่อตัดทอนอักขระหลายบรรทัด

ฉันมีปัญหาที่คล้ายกันและพบว่า css ที่ยอดเยี่ยมเพียงวิธีเดียวจากHackingui.com Hackingui.comคุณสามารถอ่านบทความสำหรับข้อมูล แต่ด้านล่างเป็นรหัสหลัก

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

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

CSS Grid สมัยใหม่ตอบ

ดูรหัสการทำงานอย่างเต็มที่ในCodePen รับ HTML ต่อไปนี้:

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

คุณสามารถใช้ CSS Grid เพื่อสร้างสามคอลัมน์และบอกให้คอนเทนเนอร์ใช้ความกว้างสูงสุด 70 อักขระสำหรับคอลัมน์กลางที่มีย่อหน้าของเรา

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

p {
  grid-column: 2 / 3;
}

นี่คือสิ่งที่ดูเหมือน (Checkout CodePenสำหรับตัวอย่างการทำงานอย่างสมบูรณ์):

นี่เป็นอีกตัวอย่างหนึ่งที่คุณสามารถใช้ minmax เพื่อกำหนดช่วงของค่า บนหน้าจอขนาดเล็กความกว้างจะถูกตั้งค่าเป็น 50 ตัวอักษรกว้างและบนหน้าจอขนาดใหญ่จะมีความกว้าง 70 ตัวอักษร

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

p {
  grid-column: 2 / 3;
}

โพสต์นี้มีไว้สำหรับโซลูชัน CSS แต่โพสต์ค่อนข้างเก่าดังนั้นในกรณีที่คนอื่นสะดุดกับเรื่องนี้และกำลังใช้เฟรมเวิร์ก JS สมัยใหม่เช่น Angular 4+ มีวิธีง่ายๆในการทำเช่นนี้ผ่าน Angular Pipes ยุ่งกับ CSS

อาจมีวิธี "ตอบโต้" หรือ "Vue" ในการทำเช่นนี้เช่นกัน นี่เป็นเพียงการแสดงให้เห็นว่าสามารถทำได้ภายในกรอบ

ตัด-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>

ลองวิธีแก้ปัญหาของฉันด้วย 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;
}