详见：http://ionicframework.com/docs/css/components
代码一：www/index.html
<body ng-app="myreddit" ng-controller="RedditCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">My Reddit</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a href="{{story.url}}" target="_blank" class="item item-thumbnail-left" ng-repeat="story in stories">
<img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.startsWith(‘http‘)"/>
<h2 class="story-title">{{story.title}}</h2>
<p>
{{story.domain}}
</p>
</a>
</div>
</ion-content>
</ion-pane>
</body>
代码二：www/css/style.css
/* Empty. Add your own CSS if you like */
h2.story-title {
white-space: normal;
height: 3.6em;
}
设置3.6em后。标题栏大概会占据三行的高度，这样domain一行能靠近底部， 看起来更美观。
ionic list component 最基本用法<ul class="list"><li class="item">xxx</li></ul>
其中图片可以设置为item-avatar-left或item-thumbnail-left
- text-overflow: ellipsis;
- white-space: nowrap;
这是h2标题栏的默认样式 如果标题过长末尾会被截断并显示成...，设置为white-space: normal后就能换行显示。 或者也可以直接在a上加上item-text-wrap
最终效果：
时间： 2024-10-25 15:30:53