私は学校向けのレスポンシブウェブサイトを作成しています。私の質問は次のとおりです。

Webサイトで（CSSを使用して）文の最大文字長（75文字など）を設定するには、画面が非常に大きい場合、文が75文字を超えないようにします。

私は最大幅を試しましたが、それは私のレイアウトを台無しにします。フレックスボックスとメディアクエリを使用して応答性を高めています。

このようにa max-widthとオーバーフローを設定することで、常に切り捨てメソッドを使用できますellipsis

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;
}

例：https : //codepen.io/srekoble/pen/EgmyxV

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 Webブラウザーレンダリングエンジンです。すべてのブラウザが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

CSSではそれは不可能です。そのためにはJavaScriptを使用する必要があります。pの幅は最大30文字に設定できますが、次の文字は自動的に表示されますが、これはそれほど正確ではなく、文字が大文字の場合は異なります。

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;
}

結果

ロレム・イプサム・ドーラーはアメット座位であり、奉献者はエリートである。Proin nisi ligula、dapibus a volutpat sit amet、mattis et ...

Jsfiddle

複数行文字を切り捨てるための純粋な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;
}

最新のCSSグリッド回答

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;
}

これは次のようになります（完全に機能する例については、CodePenをチェックアウトしてください）。

次に、minmaxを使用して値の範囲を設定できる別の例を示します。小さな画面では幅は50文字幅に設定され、大きな画面では幅は70文字幅になります。

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

この投稿はCSSソリューションに関するものですが、投稿はかなり古いため、他の人がこれにつまずいて、Angular 4+などの最新のJSフレームワークを使用している場合に備えて、Angular Pipesを介してこれを行う簡単な方法があります。 CSSをいじる。

これを行うには、おそらく「React」または「Vue」の方法があります。これは、フレームワーク内でどのように実行できるかを示すためだけのものです。

truncate-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

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;
}