web-dev-qa-db-ja.com

Cssで最大文字長を設定する

私は学校のためのレスポンシブウェブサイトを作っています、そして私の質問は：

どのように私は私が私のウェブサイト（75文字のように）の文の最大文字長さを設定するか私が非常に大きいスクリーンを持っているとき、文は75文字より遠くに行かない。

私は最大幅を試してみましたが、それは私のレイアウトをめちゃくちゃにします。私はそれを反応させるためにflexboxとmediaqueriesを使っています。

htmlcsshtml5css3text
131
Sharif1111

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

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

196
Vangel Tzo

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>
82
Paulie_D

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ページを描画するためにすべてのブラウザがレンダリングエンジンによって支えられているので、これはより具体的かもしれません。

30
V K Singh

コード例：

.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>
11
Hossein Jafari

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

3
Khado Mikhal

_ 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など...

Jsfiddle

1
imtaher

これはCSSでは不可能です。そのためにはJavascriptを使用する必要があります。あなたはpの幅を最大30文字に設定することができますが、次の文字は自動的に下に来るでしょうが、これもまたそれほど正確ではなくそして文字が大文字であるならば変わるでしょう。

1
Jean-Luc

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;
}
0
Super Model

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

現代の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;
}

これはそれがどのように見えるかです（Checkout CodePen 完全に機能する例については）：

enter image description here

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

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

p {
  grid-column: 2 / 3;
}
0
Muhammad Rehan Saeed