HTML/CSSを使用して文章の長さを制限する

Question

JSONファイルから少数の文章を呼び出して、<p>タグに追加します。

<p> 
     Thank you all for another magical night spent together 
     this last sunday at The Hippodrome in Baltimore.Thank yo... 
    <p> 

と私はそれが、でもそれは、すでにJSONに短縮されています短くしたいのですが、私はそれの長さを制限するために、純粋なCSSやHTMLを使用することができていますか？

それはこのタスクを達成するのは簡単ですjavascirptに来る場合、私はちょうどDOMで遊ぶかもしれないので、私は、任意のJavaScriptを/ jQueryの提案を必要としないが、この場合には、私は、任意の純粋なHTMLとCSSがありますかどうかを確認したいですメソッドはこれを行うことができます。

UPDATE 1： 誰もがwhite-space: nowrapを使用して1つのラインにして文章を変換するために私を提案し、その後text-overflow:ellipsisを設定することで、隠されたテキストが、制限があります、HTMLは1行だけを表示することができます。とにかく別の行を表示することはありますか？

Answer 1

を通してあなたは、単一の行の場合は、省略記号を表示するテキストの一行を達成するためにtext-overflow:ellipsis属性を使用します（オーバーフロー…）。もちろん、ブラウザによってはwidth属性を追加する必要もあります。

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

それは複数の行がある場合は、WebKitのCSS拡張属性（WebKitのは、私有財産である）-webkit-line-clamp;を使用しています。注意：WebKitブラウザまたは携帯端末（大半はWebKitベースのブラウザです）のページは次のように実装するのは簡単です：これは非標準属性（サポートされていないWebKitプロパティ）ですが、CSS仕様のドラフトには表示されません。 -webkit-line-clampは、ブロック要素によって表示されるテキストの行数を制限するために使用されます。この効果を得るには、他のWebKit属性と組み合わせる必要があります。 一般的な結合特性：

overflow : hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 

Answer 2

あなたは、リンクhttps://developer.mozilla.org/en/docs/Web/CSS/text-overflow

p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 200px; /*width as you want */ 
} 

Answer 3

使用この例をとしても使用することができます。

<p style="width: 150px;height: 15px;overflow: hidden;"> 
    Thank you all for another magical night spent together 
    this last sunday at The Hippodrome in Baltimore.Thank yo... 
</p> 

Answer 4

CSSとHTMLは、文の長さを取得することはできません。したがって、CSSの制限がなく、HTMLは文章の長さを取得できません。したがって、文の制限長を設定することはできません。しかし、要素の最大幅を持つ文の行を切り捨てるためにCSSを使用したい場合。あなたが行うことができます。

p { 
max-width: 100px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

Answer 5

をAnubhavによって答えはシングルです（最後にあなたはCSSを使用してテキストを切り捨てることになるでしょう、そしてそれのルックスで、あなたは正しく切り捨て複数行のテキストボックスをしたいですライン特有）。これを処理するためのpure-cssオプションは存在しないので（おそらく、おそらくclamp.jsなどのjQueryプラグインが必要になるでしょう） https://stackoverflow.com/a/33061059/5580153

編集：

あなたはおそらくしたい答えは別のSOここで、スレッドからのもので、それは私が感じるハッキングソリューションのビットだが、http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/：ここでは、かなり複雑なCSSのソリューションもあります。

Answer 6

代わりにtext-overflow: ellipsis;を使用できます。下記の例をお読みください。詳細情報については

<div id="readmore">Thank you all for another magical night spent together 
     this last sunday at The Hippodrome in Baltimore. 
</div> 

CSS

#readmore { 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border: 1px solid #000; 
} 

してください。このreference