web-dev-qa-db-ja.com

CSSグリッドレイアウトでテキストオーバーフローを省略記号に設定するにはどうすればよいですか？

以下のheaderのようなグリッドレイアウトがあります。幅が1frのdivにテキストがあります。 div内のテキストが長すぎる場合は切り捨ててほしい。 ellpsisとしてtext-overflowを追加しても機能しません。それを行う方法はありますか？

グリッドでなければならず、それを変更する方法はありません。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  text-overflow: Ellipsis;
}
<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>
csscss-grid
13
nullDev

.long cssを以下に変更

.long {
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

ホワイトスペースとオーバーフローを追加する必要がある理由は以下のとおりです。

  1. white-space: nowrapを使用すると、テキストの長さがブロック幅を超えたときに折り返さないようにブラウザに指示する必要があります。white-spaceプロパティのデフォルト値は通常であり、折り返すことができるため、テキストがオーバーフローする状況はありません。
  2. overflowのデフォルト値は表示されます。テキストが包含ブロックを超えると表示されるだけなので、overflowをhiddenに設定した場合にのみ、表示するテキストをオーバーフローする必要はありません。次に、テキストを完全に表示できない場合は、text-overflowプロパティを使用します。
9
Luckness

追加 overflow: hiddenおよびwhite-space: nowrapを使用したときtext-overflow

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>
3
Minal Chauhan

1）text-overflow: Ellipsis;を使用する場合は、overflow: hidden;も使用する必要があります。

2）white-space: nowrap;新しい行でのテキストの区切りを許可しません。

だから、このように変更：

.long {
  text-overflow: Ellipsis;
  overflow: hidden;/*/<------------new/*/
  white-space: nowrap;/*/<---------new/*/
}
2
Ehsan

高さを定義し、white-spaceからnowrapおよびoverflow: hidden

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}
<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>
0
dennispreston