私は学校のためのレスポンシブウェブサイトを作っています、そして私の質問は:
どのように私は私が私のウェブサイト(75文字のように)の文の最大文字長さを設定するか私が非常に大きいスクリーンを持っているとき、文は75文字より遠くに行かない。
私は最大幅を試してみましたが、それは私のレイアウトをめちゃくちゃにします。私はそれを反応させるためにflexboxとmediaqueriesを使っています。
max-width
とオーバーフローEllipsis
をこのように設定することで、いつでもtruncateメソッドを使うことができます。
p {
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
max-width: 200px;
}
例: http://jsfiddle.net/3czeyznf/ /
複数行の切り捨てについてはflex
の解決策を見てください。 3行を切り捨てた例.
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
CSSの「長さの値」はch
です。
MDNから
この単位は、要素のフォント内のグリフ '0'(ゼロ、Unicode文字U + 0030)の幅を表します。より正確にはその大きさを表します。
これはあなたが何をしているかに近いかもしれません。
p {
overflow: hidden;
max-width: 75ch;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>
Max-widthに設定した後に文字を切り捨てるためにこれを試してください。この場合は75chを使用しました
p {
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
max-width: 75ch;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>
複数行の切り捨てについては、リンクをたどってください。
例: https://codepen.io/srekoble/pen/EgmyxV
これにはwebkit cssを使用します。要するにWebKitはSafari/Chrome用のHTML/CSSウェブブラウザレンダリングエンジンです。 HTML/CSS Webページを描画するためにすべてのブラウザがレンダリングエンジンによって支えられているので、これはより具体的かもしれません。
コード例:
.limited-text{
white-space: nowrap;
width: 400px;
overflow: hidden;
text-overflow: Ellipsis;
}
<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
Chromeでは、 " -webkit-line-clamp "で表示する行数を設定できます。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Number of lines displayed before it truncate */
overflow: hidden;
だから私にとっては、エクステンションで使うことなので完璧です、ここでより多くの情報: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight -up-broken-865413f16e5
_ html _
<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>
jQuery
var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
$(p).text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
_ css _
#dash {
width: 400px;
height: 60px;
overflow: hidden;
}
#dash p {
padding: 10px;
margin: 0;
}
_ result _
Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Proin nisi ligula、dapibus、volutpat、amet、mattisなど...
これはCSSでは不可能です。そのためにはJavascriptを使用する必要があります。あなたはpの幅を最大30文字に設定することができますが、次の文字は自動的に下に来るでしょうが、これもまたそれほど正確ではなくそして文字が大文字であるならば変わるでしょう。
2つの方法で私の解決策を試してください。
<div class="wrapper">
<p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>
<div class="wrapper">
<p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>
.wrapper {
padding: 20px;
background: #eaeaea;
max-width: 400px;
margin: 50px auto;
}
.demo-1 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.demo-2 {
overflow: hidden;
white-space: nowrap;
text-overflow: Ellipsis;
max-width: 150px;
}
複数行の文字を切り捨てるための純粋なCSSソリューション
私は同様の問題を抱えていて、 Hackingui.com からこの優れたCSSのみの解決策を見つけました。あなたは情報のための記事を読むことができますが、以下はメインコードです。
私はそれをテストしました、そしてそれは完全に機能します。うまくいけば、誰かがJSやサーバーサイドのオプションを選ぶ前にそれが便利だと思う
/* styles for '...' */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible Word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
CodePen で完全に機能するコードを見てください。次のようなHTMLがあるとします。
<div class="container">
<p>Several paragraphs of text...</p>
</div>
CSSグリッドを使用して3つの列を作成し、段落を含む中央の列の最大幅を70文字にするようにコンテナーに指示することができます。
.container
{
display: grid;
grid-template-columns: 1fr, 70ch 1fr;
}
p {
grid-column: 2 / 3;
}
これはそれがどのように見えるかです(Checkout CodePen 完全に機能する例については):
これは、minmaxを使って値の範囲を設定できる別の例です。小さい画面では幅は50文字の幅に設定され、大きい画面では70文字の幅になります。
.container
{
display: grid;
grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}
p {
grid-column: 2 / 3;
}