Zeichenbegrenzung in Listen und per Ajax nachgeladenen Listen

Veröffentlichungsdatum: 09. Mai 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Text kann in Listen über spezielle Crop-Funktionen direkt über CSS begrenzt / abgeschnitten werden.

Eine Möglichkeit hierzu ist der Einsatz des WSL-Tags cropText, welches auch über eine CSS-Only-Eigenschaft (-w-wsl) angesprochen werden kann. Diese Funktion greift allerdings nicht bei über Ajax nachgeladenen Listeneinträgen.

Mit der Mobile First gibt es aus diesem Grund weitere CSS-Only-Eigenschaften, welche Sie über das aktuelle Listen-Template einsetzen können. Ein Beispiel finden Sie nachfolgend. Um die Zeichenbegrenzung zu aktivieren, setzen Sie -w-option-description-cropText auf 1.
Ab CMS-Version 15 können Sie dies zudem auch im aktuellen Banner-Weblic einsetzen.

Auszug aus der listDefault.scss

/*@wCssFragment{class:listDefaultDescription;variant:10;caption:Darf Bild umfließen;caption-en:May surround image;livepreview:yes}*/
.listDefaultDescription_var10 {

  -w-displayElements:description=yes;

  -w-option-description-cropText:0; /* Beschreibungstext limitieren [0(Nein)|1(Ja)]*/
  -w-option-description-lengthCrop:128; /* Anzahl der Zeichen, die maximal ausgelesen werden sollen */
  -w-option-description-shrinkCharacterCrop:'word'; /* Zeichen, bei dem beendet werden soll 'word' für Wort, '.' für Satz */
  -w-option-description-delimiterCrop:'...';  /* Falls die Zeichenkette über "lengthCrop" reduziert wurde, wird sie durch die angegebenen Zeichen ergänzt. */

  .listEntryDescription {
    
    display:block;
  }
}

Auszug aus der listDefault.scss mit aktivierter Zeichenbegrenzung zur Listen-Untervariante 10 (Beschreibung)

/*@wCssFragment{class:listDefaultDescription;variant:10;caption:Darf Bild umfließen;caption-en:May surround image;livepreview:yes}*/
.listDefaultDescription_var10 {

  -w-displayElements:description=yes;

  -w-option-description-cropText:1; /* Beschreibungstext limitieren [0(Nein)|1(Ja)]*/
  -w-option-description-lengthCrop:128; /* Anzahl der Zeichen, die maximal ausgelesen werden sollen */
  -w-option-description-shrinkCharacterCrop:'word'; /* Zeichen, bei dem beendet werden soll 'word' für Wort, '.' für Satz */
  -w-option-description-delimiterCrop:'...';  /* Falls die Zeichenkette über "lengthCrop" reduziert wurde, wird sie durch die angegebenen Zeichen ergänzt. */

  .listEntryDescription {
    
    display:block;
  }
}

Die genierte Seite muss XML-Konform sein!