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

jQuery Mobileのマークアップの基本とCSSの変更 (5/6)

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

　続いて、「セミナー情報」のページ（#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>

セミナー情報のページ

　サンプル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）。

テキストが省略されずに表示される