Skip to content

Instantly share code, notes, and snippets.

@notice notice/3270-sample
Last active Aug 29, 2015

Embed
What would you like to do?
<!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>文章を表示する8つの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>全体5行のうち、タイトルが最大2行で、残りが説明文の行数とする場合</h2>
<p>文章の量でレイアウトがくずれないように、あらかじめきめられた文字数や行数で、文章を省略します。三点リーダーを表示することで、以降にまだ文章があることを示します。</p>
</div>
</div>
<div class="list-item style5">
<img src="//placehold.it/120x100&text=style5-2" />
<div class="desc">
<h2>全体5行、タイトルが1行</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">文章を表示する8つのCSSスタイル(webkit)</a>」のサンプルコードです。</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.