Okul için duyarlı bir web sitesi hazırlıyorum ve sorum şu:

Web sitemde (CSS ile) cümlelerin maksimum karakter uzunluğunu nasıl ayarlayabilirim (75 karakter gibi) Çok büyük bir ekrana sahip olduğumda, cümlelerin 75 karakterden fazla ilerlemeyeceği.

Ben maksimum genişlik denedim ama bu benim düzen berbat. Esnek hale getirmek için flexbox ve medya sorguları kullanıyorum.

Bunun gibi bir max-widthve taşma ayarlayarak her zaman bir kesme yöntemi kullanabilirsinizellipsis

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

Bir örnek: http://jsfiddle.net/3czeyznf/

Çok hatlı bir kesme için bir flexçözüme göz atın . 3 satırda kesilme örneği.

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

Bir örnek: https://codepen.io/srekoble/pen/EgmyxV

CSS 'uzunluk değeri' var ch.

MDN isimli ev sahibinden

Bu birim, öğenin yazı tipindeki '0' glifinin (sıfır, Unicode U + 0030 karakteri) genişliğini veya daha kesin olarak ilerleme ölçüsünü temsil eder.

Bu ne olduğunuzu yaklaşık olarak gösterebilir.

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>

Maksimum genişliğe ayarladıktan sonra karakterleri kısaltmak için bunu deneyin. Bu durumda 75 kanal kullandım

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>

Çok satırlı kesme için lütfen bağlantıyı takip edin.

Bir örnek: https://codepen.io/srekoble/pen/EgmyxV

Bunun için webkit css kullanacağız. Kısacası WebKit, Safari / Chrome için bir HTML / CSS web tarayıcısı oluşturma motorudur. HTML / CSS web sayfasını çizmek için her tarayıcı bir oluşturma motoru tarafından desteklendiğinden, bu tarayıcıya özgü olabilir.

örnek kod:

.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 ile " -webkit-line-clamp " ile görüntülenen satır sayısını ayarlayabilirsiniz :

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

Bu yüzden benim için bir uzantıda kullanmak, bu yüzden mükemmel, daha fazla bilgi burada: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -Broken-865413f16e5

Bu CSS ile mümkün değil, bunun için Javascript kullanmanız gerekecek. P'nin genişliğini 30 karaktere kadar ayarlayabilseniz de, sonraki harfler otomatik olarak aşağı inecektir, ancak yine de bu doğru olmayacak ve karakterler büyük harfle değişiyorsa değişecektir.

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

SONUÇ

Lorem ipsum dolor sit amet, seçkin adipiscing elit. Proin nisi ligula, dapibus bir volutpat sit amet, mattis et ...

Jsfiddle

Çok satırlı karakterleri kısaltmak için saf CSS çözümü

Benzer bir sorun vardı ve Hackingui.com bu mükemmel css sadece çözüm bulundu . Bilgi için makaleyi okuyabilirsiniz, ancak ana kod aşağıdadır.

Test ettim ve mükemmel çalışıyor. Umarım birisi JS veya sunucu tarafı seçeneklerini seçmeden önce bunu yararlı bulur

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

Modern CSS Izgara Cevabı

CodePen'de tam çalışan kodu görüntüleyin . Aşağıdaki HTML verildiğinde:

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

Üç sütun oluşturmak için CSS Izgarası'nı kullanabilir ve kapsayıcıya paragrafımızı içeren orta sütun için maksimum 70 karakter genişliğini almalarını söyleyebilirsiniz.

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

p {
  grid-column: 2 / 3;
}

Şöyle görünüyor ( Tam çalışan bir örnek için Checkout CodePen ):

Bir değer aralığı ayarlamak için minmax'ı kullanabileceğiniz başka bir örnek. Küçük ekranlarda genişlik 50 karakter genişliğinde ve büyük ekranlarda 70 karakter genişliğindedir.

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

p {
  grid-column: 2 / 3;
}

Bu yazı bir CSS çözümü içindir, ancak yazı oldukça eskidir, bu yüzden başkalarının bununla karşılaşması ve Angular 4+ gibi modern bir JS çerçevesi kullanması durumunda, bunu Açısal Borular aracılığıyla yapmanın basit bir yolu vardır. CSS ile uğraşmak.

Bunu yapmanın muhtemelen "Tepki" veya "Vue" yolları da vardır. Bu sadece bir çerçeve içinde nasıl yapılabileceğini göstermek içindir.

kesiğinin-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>

Çözümümü 2 farklı yolla deneyin.

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