Dans mon application mobile angularjs / ionic, j'ai implémenté une liste de messages. Maintenant, je veux le modifier, de sorte que si le texte du message est plus large que le conteneur div, il doit couper la chaîne et ajouter 3 points.

Ma liste de messages ressemble à ceci:

<ion-list ng-repeat="message in messages">
        <ion-item can-swipe="true" class="item-icon-left item-icon-right">

          <i class="icon ion-email-unread"></i>

          <div class="row">
            <span class="col col-50">
              <h2>{{message.title}}</h2>
            </span>
            <span class="col col-50 content-right text-small">
              {{message.dateString}}
            </span>
          </div>

          <div class="row">
            <span class="col text-small">
              {{message.text}}
            </span>
          </div>

          <i class="icon ion-chevron-right"></i>

          <ion-option-button class="button-dark">
            More
          </ion-option-button>
          <ion-option-button class="button-assertive">
            Delete
          </ion-option-button>
        </ion-item>

      </ion-list>

Comment puis-je faire cela de manière dynamique, de sorte que cela dépende vraiment de la largeur de l'appareil / du conteneur?

3
Kingalione 14 juil. 2015 à 14:26

2 réponses

Meilleure réponse

Vous ne faites pas cela avec JS.

Utilisez simplement les propriétés overflow et text-overflow du CSS:

div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div>1234567890123456789012345678901234567890</div>
10
Cerbrus 14 juil. 2015 à 11:29

Vous pouvez y parvenir facilement en utilisant CSS et en spécifiant un width pour votre contenu et en ajoutant un style text-overflow avec la valeur elipsis.

#crop-text {
  /* essential */
  text-overflow: ellipsis;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  
  /* for good looks */
  padding: 10px;
  
  border: 1px #000 solid;
}
<div id="crop-text">Hello, this is a really long text string.</div>

Ce didacticiel explique ce que vous devez faire. http://davidwalsh.name/css-ellipsis

2
Mr. Polywhirl 14 juil. 2015 à 11:33