Saya membuat situs web responsif untuk sekolah dan pertanyaan saya adalah:

Bagaimana cara menetapkan panjang karakter maksimum kalimat (dengan CSS) di situs web saya (seperti 75 karakter) bahwa ketika saya memiliki layar yang sangat besar, kalimat tidak akan melangkah lebih jauh dari 75 karakter.

Saya telah mencoba lebar maks tetapi itu mengacaukan tata letak saya. Saya menggunakan permintaan flexbox dan media untuk membuatnya responsif.

Anda selalu dapat menggunakan metode terpotong dengan mengatur max-widthdan melimpah ellipsisseperti ini

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

Contoh: http://jsfiddle.net/3czeyznf/

Untuk pemotongan multi-line lihatlah flexsolusinya. Contoh dengan pemotongan pada 3 baris.

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

Contoh: https://codepen.io/srekoble/pen/EgmyxV

Ada 'nilai panjang' CSS dari ch.

Dari MDN

Unit ini mewakili lebar, atau lebih tepatnya ukuran gerak maju, dari mesin terbang '0' (nol, karakter Unicode U + 0030) dalam font elemen.

Ini mungkin mendekati apa yang Anda cari.

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>

Coba ini untuk memotong karakter setelah mengaturnya ke lebar maksimal. Saya telah menggunakan 75ch dalam hal ini

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>

Untuk pemotongan multiline, silakan ikuti tautan.

Contoh: https://codepen.io/srekoble/pen/EgmyxV

Kami akan menggunakan css webkit untuk ini. Singkatnya WebKit adalah mesin rendering browser web HTML / CSS untuk Safari / Chrome. Ini mungkin spesifik browser karena setiap browser didukung oleh mesin rendering untuk menggambar halaman web HTML / CSS.

contoh kode:

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

    

Dengan Chrome Anda dapat mengatur jumlah baris yang ditampilkan dengan " -webkit-line-clamp ":

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

Jadi bagi saya itu adalah untuk digunakan dalam ekstensi sehingga sempurna, informasi lebih lanjut di sini: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-st Lurus-up -broken-865413f16e5

Itu tidak mungkin dengan CSS, Anda harus menggunakan Javascript untuk itu. Meskipun Anda dapat mengatur lebar p hingga 30 karakter dan huruf berikutnya akan turun secara otomatis, tetapi sekali lagi ini tidak akan seakurat itu dan akan bervariasi jika karakter menggunakan huruf kapital.

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

HASIL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Setelah itu, ligula, dapibus dan duduk di atasnya, mattis d ...

Jsfiddle

Solusi CSS murni untuk memotong karakter multi-baris

Saya memiliki masalah yang sama dan menemukan solusi css hanya luar biasa ini dari Hackingui.com . Anda dapat membaca artikel untuk informasi tetapi di bawah ini adalah kode utamanya.

Saya mengujinya dan bekerja dengan sempurna. Semoga seseorang menemukan itu berguna sebelum memilih opsi sisi JS atau server

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

Jawaban Kotak CSS Modern

Lihat kode yang berfungsi penuh pada CodePen . Diberikan HTML berikut:

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

Anda dapat menggunakan CSS Grid untuk membuat tiga kolom dan memberi tahu wadah untuk mengambil lebar maksimum 70 karakter untuk kolom tengah yang berisi paragraf kami.

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

p {
  grid-column: 2 / 3;
}

Ini seperti apa (Checkout CodePen untuk contoh yang berfungsi penuh):

Berikut adalah contoh lain di mana Anda bisa menggunakan minmax untuk menetapkan rentang nilai. Pada layar kecil lebarnya akan diatur menjadi 50 karakter dan pada layar besar lebarnya 70 karakter.

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

p {
  grid-column: 2 / 3;
}

Posting ini adalah untuk solusi CSS, tetapi pos tersebut sudah cukup lama, jadi kalau-kalau orang lain tersandung dan menggunakan kerangka JS modern seperti Angular 4+, ada cara sederhana untuk melakukan ini melalui Pipa Angular tanpa harus main-main dengan CSS.

Mungkin ada cara "Bereaksi" atau "Vue" untuk melakukan ini juga. Ini hanya untuk menunjukkan bagaimana hal itu dapat dilakukan dalam suatu kerangka kerja.

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

Coba solusi saya dengan 2 cara berbeda.

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