1. mpyw

    Posted

    mpyw
Changes in title
+mb_strimwidth関数なんて必要なかった(?)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,66 @@
+# 導入
+
+PHPerにとって丸め処理の定番と言われれば、こんなコードを思いつきますよね。
+
+```php
+$str = mb_strimwidth($str, 0, 10, '…', 'UTF-8');
+```
+
+しかし出力結果が意図したとおりになるためには、以下の条件が揃っている必要がありました。
+
+- 等幅フォントを使用している
+- 半角幅になる特集なマルチバイト文字を使用していない(半角カナなど)
+
+実はこれらの問題を鮮やかに **CSS3** だけで解決する方法がありました。
+
+# 実装
+
+以下のようにすれば記述すれば実現できます。
+
+```css:CSS
+.strimwidth {
+
+ /* 任意 */
+ min-width: 100px; /* 最小表示幅の指定 */
+ max-width: 200px; /* 最大表示幅の指定 */
+
+ /* 必須 */
+ white-space: nowrap; /* 空白で改行させない */
+ overflow: hidden; /* はみ出た部分を表示しない */
+ text-overflow: ellipsis; /* はみ出た場合に「…」を表示 */
+ -webkit-text-overflow: ellipsis; /* はみ出た場合に「…」を表示 (Safari用) */
+ -o-text-overflow: ellipsis; /* はみ出た場合に「…」を表示 (Opera用) */
+
+}
+```
+
+```html+php:HTML+PHP
+<ul>
+<?php foreach ($titles as $title): ?>
+ <li class="strimwidth"><?=htmlspecialchars($title, ENT_QUOTES, 'UTF-8')?></li>
+<?php endforeach; ?>
+</ul>
+```
+
+**※ インライン要素が対象の場合、`display` プロパティの値を `inline-block` または `block` に設定する必要があります。**
+
+# SEO面での問題点(?)
+
+```css
+.strimwidth {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+```
+
+私が調べた限りでは、この記述が直接SEOペナルティに結び付くという主張をしている人は見られませんでした。安心して使えると思います。むしろ **文字列を削らずにそのままHTML中に残せる** ので、優良な検索結果に結びつきやすいと考えることも出来るかもしれません。
+
+# 参考リンク
+
+- [mb_strimwidth](http://php.net/manual/ja/function.mb-strimwidth.php)
+- [mb_strimwidthが意図した結果にならない場合](http://lab.flama.co.jp/archives/1065/)
+- [CSS で指定幅を超えた文字列を切り取り「…」を付加する方法](http://monopocket.jp/blog/css/2866/)
+- [文字数制限をしないでCSSだけで「...」を表示する](http://www.ilovex.co.jp/blog/system/html/css-1.html)
+- [スタイルシートで文字列を省略し、・・・を付ける方法](http://sfi.hamazo.tv/e1906425.html)
+- [隠しテキストと隠しリンク](https://support.google.com/webmasters/answer/66353)
+- [text-overflow:ellipsis;やoverflow:hiddenの隠しテキストでペナルティを受けるのか](http://www.seo-blogs.biz/2013/01/28/4333/)