notice/3270-sample

## 3270-sample
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>文章を表示する８つのCSSスタイル（webkit）</title>
    <style>
    /*
     * reset
     */
    * {
      margin : 0;
      padding : 0;
    }
    body, h2 {
      font: 12px/1.5 "ヒラギノ角ゴ Pro W3"
    }

    .list-item {
      width: 320px;
      display: -webkit-box;
    }

    .list-item img {
      width: 120px;
      height: 100px;
      margin: 5px;
    }

    .list-item .desc {
      width: 175px;
      margin: 5px 10px 5px 5px;
    }

    .list-item .desc h2 {
      font-weight: bold;
    }

    .list-item .desc p {
    }

    .style1 .desc {
      height: 100px;
      overflow: hidden;
    }

    .style2 .desc p {
      height: 72px;
      overflow: hidden;
    }

    .style3 .desc p {
      height: 72px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .style4 .desc h2 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .style4 .desc p {
      height: 72px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .style5 .desc {
      height: 90px;
      overflow: hidden;
    }
    .style5 .desc h2 {
      max-height: 36px;
      overflow: hidden;
    }
    .style5 .desc p {
      max-height: 72px;
      overflow: hidden;
    }

    .style6 .desc {
      height: 100px;
      overflow: hidden;
    }

    .style7 .desc {
      height: 100px;
      overflow: hidden;
      overflow-wrap: break-word;
    }

    .style8 .desc {
      height: 100px;
      overflow: hidden;
      word-break: break-all;
    }
    </style>
  </head>
  <body>
    <div class="list-item">
      <img src="//placehold.it/120x100&text=ellipsis" />
      <div class="desc">
        <h2>ellipsisとは省略のこと</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style1">
      <img src="//placehold.it/120x100&text=style1" />
      <div class="desc">
        <h2>overflowで省略</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style2">
      <img src="//placehold.it/120x100&text=style2" />
      <div class="desc">
        <h2>overflowで省略</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style3">
      <img src="//placehold.it/120x100&text=style3" />
      <div class="desc">
        <h2>最終行に…を付加</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style4">
      <img src="//placehold.it/120x100&text=style4" />
      <div class="desc">
        <h2>text-overflowで長いタイトルを省略</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style5">
      <img src="//placehold.it/120x100&text=style5-1" />
      <div class="desc">
        <h2>全体５行のうち、タイトルが最大２行で、残りが説明文の行数とする場合</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style5">
      <img src="//placehold.it/120x100&text=style5-2" />
      <div class="desc">
        <h2>全体５行、タイトルが１行</h2>
        <p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
      </div>
    </div>
    <div class="list-item style6">
      <img src="//placehold.it/120x100&text=style6" />
      <div class="desc">
        <h2>長い単語の折り返し</h2>
        <p>たとえば、TheQuickBrownFoxJumpsOverTheLazyDogという単語があると、このように表示されます。</p>
      </div>
    </div>
    <div class="list-item style7">
      <img src="//placehold.it/120x100&text=style7" />
      <div class="desc">
        <h2>長い単語の折り返し</h2>
        <p>たとえば、TheQuickBrownFoxJumpsOverTheLazyDogという単語があると、このように表示されます。</p>
      </div>
    </div>
    <div class="list-item style8">
      <img src="//placehold.it/120x100&text=style8" />
      <div class="desc">
        <h2>長い単語の折り返し</h2>
        <p>たとえば、TheQuickBrownFoxJumpsOverTheLazyDogという単語があると、このように表示されます。</p>
      </div>
    </div>
    <div><p>これは、「<a href="http://www.notice.co.jp/archives/3270">文章を表示する８つのCSSスタイル（webkit）</a>」のサンプルコードです。</div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>文章を表示する８つのCSSスタイル（webkit）</title>
	<style>
	/*
	* reset
	*/
	* {
	margin : 0;
	padding : 0;
	}
	body, h2 {
	font: 12px/1.5 "ヒラギノ角ゴ Pro W3"
	}

	.list-item {
	width: 320px;
	display: -webkit-box;
	}

	.list-item img {
	width: 120px;
	height: 100px;
	margin: 5px;
	}

	.list-item .desc {
	width: 175px;
	margin: 5px 10px 5px 5px;
	}

	.list-item .desc h2 {
	font-weight: bold;
	}

	.list-item .desc p {
	}

	.style1 .desc {
	height: 100px;
	overflow: hidden;
	}

	.style2 .desc p {
	height: 72px;
	overflow: hidden;
	}

	.style3 .desc p {
	height: 72px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	}

	.style4 .desc h2 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	.style4 .desc p {
	height: 72px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	}

	.style5 .desc {
	height: 90px;
	overflow: hidden;
	}
	.style5 .desc h2 {
	max-height: 36px;
	overflow: hidden;
	}
	.style5 .desc p {
	max-height: 72px;
	overflow: hidden;
	}

	.style6 .desc {
	height: 100px;
	overflow: hidden;
	}

	.style7 .desc {
	height: 100px;
	overflow: hidden;
	overflow-wrap: break-word;
	}

	.style8 .desc {
	height: 100px;
	overflow: hidden;
	word-break: break-all;
	}
	</style>
	</head>
	<body>
	<div class="list-item">
	<img src="//placehold.it/120x100&text=ellipsis" />
	<div class="desc">
	<h2>ellipsisとは省略のこと</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style1">
	<img src="//placehold.it/120x100&text=style1" />
	<div class="desc">
	<h2>overflowで省略</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style2">
	<img src="//placehold.it/120x100&text=style2" />
	<div class="desc">
	<h2>overflowで省略</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style3">
	<img src="//placehold.it/120x100&text=style3" />
	<div class="desc">
	<h2>最終行に…を付加</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style4">
	<img src="//placehold.it/120x100&text=style4" />
	<div class="desc">
	<h2>text-overflowで長いタイトルを省略</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style5">
	<img src="//placehold.it/120x100&text=style5-1" />
	<div class="desc">
	<h2>全体５行のうち、タイトルが最大２行で、残りが説明文の行数とする場合</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style5">
	<img src="//placehold.it/120x100&text=style5-2" />
	<div class="desc">
	<h2>全体５行、タイトルが１行</h2>
	<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
	</div>
	</div>
	<div class="list-item style6">
	<img src="//placehold.it/120x100&text=style6" />
	<div class="desc">
	<h2>長い単語の折り返し</h2>
	<p>たとえば、TheQuickBrownFoxJumpsOverTheLazyDogという単語があると、このように表示されます。</p>
	</div>
	</div>
	<div class="list-item style7">
	<img src="//placehold.it/120x100&text=style7" />
	<div class="desc">
	<h2>長い単語の折り返し</h2>
	<p>たとえば、TheQuickBrownFoxJumpsOverTheLazyDogという単語があると、このように表示されます。</p>
	</div>
	</div>
	<div class="list-item style8">
	<img src="//placehold.it/120x100&text=style8" />
	<div class="desc">
	<h2>長い単語の折り返し</h2>
	<p>たとえば、TheQuickBrownFoxJumpsOverTheLazyDogという単語があると、このように表示されます。</p>
	</div>
	</div>
	<div><p>これは、「<a href="http://www.notice.co.jp/archives/3270">文章を表示する８つのCSSスタイル（webkit）</a>」のサンプルコードです。</div>
	</body>
	</html>