html - javascriptangularjs cut string to fit in a div - Stack Overflow

admin管理员组

文章数量:1322371

in my angularjs/ionic mobile application I have implemented a list of messages. Now I want to modify it, so that if the message text is wider than the div container it should cut the string and adds 3 dots.

My message list looks like this:

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

How can I do this dynamically, so that it really depends on the width of the device/container?

in my angularjs/ionic mobile application I have implemented a list of messages. Now I want to modify it, so that if the message text is wider than the div container it should cut the string and adds 3 dots.

My message list looks like this:

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

How can I do this dynamically, so that it really depends on the width of the device/container?

• javascript
• html
• css
• angularjs

Share Improve this question Follow asked Jul 14, 2015 at 11:26 KingalioneKingalione 4,27566 gold badges5151 silver badges8989 bronze badges 1

• You can add :after content with ... and overflow hidden – sertsedat Commented Jul 14, 2015 at 11:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You don't do that with JS.

Simply use CSS's overflow and text-overflow properties:

div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>1234567890123456789012345678901234567890</div>

You can achieve this easily by using CSS and specifying a width for your content and adding a text-overflow style with the value of 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>

This tutorial explains what you need to do. http://davidwalsh.name/css-ellipsis

本文标签： htmljavascriptangularjs cut string to fit in a divStack Overflow