2012-03-01

jQueryMobileのListviewの中で文章を改行して表示

jQuery MobileのListviewを使ったとき、長くて一行に収まりきらない文章は「...」でちょん切られちゃうんですけど、改行して文章全体が表示されるようにしたい場合があります。項目のタイトルと説明からなるリストだと、説明の末尾を「...」で切らないで複数行にわたって文章を表示した方がいい場合の方が多いように思います。

なんでちょん切られているのかというと、CSSで white-space: nowrap; が指定されているからです。こんな指定がされています。
.ui-li .ui-btn-text a.ui-link-inherit { 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

white-space: normal; を指定し直せば、ちゃんと改行されるようになります。
個人的には、.ui-li-desc はデフォルトで white-space: normal; でいいような気がします。

0 件のコメント: