1. ホーム
  2. html

[解決済み] 2行に渡るテキストオーバーフローの省略

2022-05-05 21:16:05

質問

CSSのルールを組み合わせて、テキストがオーバーフローする(親の枠から出る)タイミングで省略記号(...)で終わるようにできるのは知っています。

同じ効果を得るために、テキストを2行以上で折り返すことは可能でしょうか(できないと言うのも自由ですが)?

デモはこちら .

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

ご覧の通り、divの幅より広くなるとテキストはellipisで終わります。しかし、テキストが2行目に折り返して進むにはまだ十分なスペースがあります。これを中断しているのが white-space: nowrap これは、省略が機能するために必要なものです。

何かアイデアはありますか?

追伸:JSの解決策はなく、可能であれば純粋なCSSです。

どのように解決するのですか?

こんなの見たことないですか? 記事 しかし、Chris Coyierの優れたCSS-Tricks.comは、しばらく前にこのリンクを掲載し、あなたが求めるものを正確に達成する純粋なCSSソリューションです。

(クリックするとCodePenで表示されます)

html,
body,
p {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.ellipsis {
  overflow: hidden;
  height: 200px;
  line-height: 25px;
  margin: 20px;
  border: 5px solid #AAA;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: 200px;
}

.ellipsis>*:first-child {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "\02026";
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  top: -25px;
  left: 100%;
  width: 3em;
  margin-left: -3em;
  padding-right: 5px;
  text-align: right;
  background-size: 100% 100%;
  /* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
<div class="ellipsis">
  <div>
    <p>
      Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of
      driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing
      up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off –
      then, I account it high time to get to sea as soon as I can.
    </p>
  </div>
</div>

もちろん、純粋なCSSソリューションであることは、かなり複雑なものでもありますが、きれいに、エレガントに動作します。Javascriptの方がはるかに簡単に(そして間違いなくより劣化しやすく)実現できるので、Javascriptは問題外だと仮定します。

おまけで ダウンロード可能なZIPファイル の完全なプロセス(理解したい場合など)だけでなく、SASS mixin ファイルもあるので、あなたのプロセスに簡単に折り込むことができます。

お役に立てれば幸いです。

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/