このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第3回

jQuery Mobileのマークアップの基本とCSSの変更

2011年06月06日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

セミナー情報ページの作成とテキスト省略機能の無効化

 続いて、「セミナー情報」のページ(#seminar)を作成します。#seminarはトップページと同様、data-role="listview"を使ったリスト型のUIで作ります。コンテンツ要素内に次のようなHTMLを記述します。

サンプル14[HTML]


<div data-role="content">
  <h2 class="h1">セミナー情報</h2>
  <ul data-role="listview" data-inset="true">
    <li><a href="http://wdf.jp/vol01/">
      <h3>WDF Vol.1</h3>
      <p>金沢市 ITビジネスプラザ武蔵 6F ホール</p>
      <p>2011年6月11日</p>
    </a></li>
    <li><a href="http://rd.67.org/ws/workshop/detail/091html.html">
      <h3>西畑一馬のCSS3でつくるスマートフォンサイト講座</h3>
      <p>原宿 ロクナナワークショップ</p>
      <p>2011年7月14日</p> 
    </a></li>
    <li><a href="http://www.sacss.net/jquery_event/">
      <h3>SaCSS Special!</h3>
      <p>札幌市産業振興センター</p>
      <p>2011年7月23日</p> 
    </a></li>
  </ul>
</div>


12.jpg
セミナー情報のページ

 サンプル14をスマートフォンのブラウザーで確認すると、一見問題なく表示できているように見ますが、よく見ると肝心のセミナー名が途中で「...」と省略されているのが分かります。jQuery Mobileの仕様で、CSS3の「text-overflow:ellipsis」を使って特定の要素の内側の幅を超える文字列を「...」と省略してしまうのです。

 このままだと困るので、文字列を省略せず、折り返して表示するように変更します。最初に、text-overflowを初期化するスタイルを定義します。

サンプル15[CSS]


.wordbreak{
overflow: visible;
white-space: normal;
}


 「oveflow: visible」で文字列を省略をしないように、「white-space: normal」で改行するように設定しています。CSSで定義したclass属性「wordbreak」をテキストが省略されている要素に対して追加します。

サンプル15[HTML]


<p class="wordbreak">金沢市 ITビジネスプラザ武蔵 6F ホール</p>


サンプル15[HTML]


<h3 class="wordbreak">西畑一馬のCSS3でつくるスマートフォンサイト講座</h3>


 以上でjQuery Mobileによるテキストの自動省略機能をオフにできました(サンプル15)。

13.jpg
テキストが省略されずに表示される
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く