block要素の子要素でtext-overflow:ellipsisを適用させるものとさせないものを使いたい

テキストで説明するのが難しいので図も使ってやりたいことを説明します。

赤い部分がblock要素、A,Bがその子要素としたときに、Bにはそこに入れる文字列を改行せずにすべて表示させたい。
またAはBを表示して余ったエリアに改行せずに表示させ、幅が足りていなければ

css
1text-overflow: ellipsis;
2```で表示させるようにしたいです。
3
4|Vivamus sagittis lacus vel augu...|2017-05-18 01:23:45|
5|:--|:--:|
6
7のような感じです。
8
9どのような要素を使い、スタイルを適用させれば望むような形にできるでしょうか。
10よろしくお願いします。

行動規範の内容に同意します

回答4件

flexしかなさそう。

HTML
1<div id="box">
2  <dl>
3    <dd>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</dd>
4    <dt>2017-05-18 01:23:45</dt>
5  </dl>
6</div>

修正版

HTML
1<div id="box">
2  <dl>
3    <dt>2017-05-18 01:23:45</dt>
4    <dd>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</dd>
5  </dl>
6</div>

CSS
1#box {
2  width:1000px;/* 100%でも確認済み */
3}
4#box dl {
5  display:flex;
6  flex-wrap:nowrap;
7  border-top:1px solid #ccc;
8  border-bottom:1px solid #ccc;
9  border-left:1px solid #ccc;
10  width:100%;
11}
12#box dl dt,#box dl dd {
13  padding:5px;
14  background-color:#dedede;
15  border-right:1px solid #ccc;
16  width:auto;/* この行はいらない */
17  font-size:14px;
18  font-weight:bold;
19  white-space:nowrap;
20}
21#box dl dd {
22  flex-grow:1;
23  order:-1;/* 追記 */
24  overflow:hidden;
25  text-overflow:ellipsis;
26}

#boxの数値を変更しても同じように表示されたので、
多分大丈夫だと思います。

追記：ソース内コメント部分を参照ください。
あと、このままだと、ボーダー分はみ出すかもしれないので、
#box dlにbox-sizing:border-box;が必要かも。

投稿2017/05/18 11:28

編集2017/06/06 05:13

LibertyBell3

総合スコア1084

think49

2017/06/06 04:17

HTML Living Standard によれば、dl要素のコンテンツモデルは「それぞれ1つ以上のdt要素の後に来る1つ以上のdd要素からなり」とあるので、dd要素が先行するのは文法違反な気がします。 https://momdo.github.io/html/semantics.html#the-dl-element

LibertyBell3

2017/06/06 05:17

そうですね、修正版追記しておきました。どうせflex使っているなら、order指定で解決ですね。

行動規範の内容に同意します

flexやJSを使えば大抵のことは解決できてしまいますよね。
そこで、table-cell を使う方法を紹介します。

html
1<div class="table">
2  <div class="cell text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
3  <div class="cell date">2017-05-18 01:23:45</div>
4</div>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5.table {
6  display: table;
7  width: 600px;
8}
9.cell {
10  display: table-cell;
11  white-space: nowrap;
12}
13.cell.text {
14  max-width: 1px;  /* text-overflow: ellipsis; を有効にするためのハック */
15  text-overflow: ellipsis;
16  overflow: hidden;
17}
18.cell.date {
19  width: 1%;
20}

table-cell 万能。

投稿2017/06/06 04:08

Takamoso

総合スコア248

Bの幅が固定なら楽勝なのですが・・・。
columnとかtable-cellとかやってみましたが、どうもうまくいかないので、
JavaScript使うしかないかと思います。。。

HTML
1<html>
2<head>
3<style>
4body,p,div {margin: 0; padding: 0;}
5
6#container,
7#container > p { box-sizing: border-box; padding: 10px; }
8#container {
9  background: #CC0000;
10  padding: 10px;
11  width: 500px;
12}
13#container > p {
14  background: #FFFFFF;
15  display: inline-block;
16  height: 40px;
17  padding: 10px;
18  vertical-align: middle;
19}
20#boxA {
21  margin: 0 10px 0 0;
22  overflow: hidden;
23  text-overflow: ellipsis;
24  white-space: nowrap;
25}
26
27</style>
28</head>
29<body>
30<div id="container"><!--
31  --><p id="boxA">Vivamus sagittis lacus vel augu aaaaaaaaaaaaaaaaa</p><!--
32  --><p id="boxB">2017-05-18 01:23:45</p><!--
33--></div>
34<script>
35// 各DOMを取得
36var $wrapperDom = document.getElementById('container'),
37  $blockA = document.getElementById('boxA'),
38  $blockB = document.getElementById('boxB');
39
40// 各DOMに適用されたStyleを取得
41var $wrapperStyle = window.getComputedStyle($wrapperDom),
42  $blockAStyle = window.getComputedStyle($blockA),
43  $blockBStyle = window.getComputedStyle($blockB);
44
45// 各DOMの大きさなどを取得
46var $wrapperBoxWidth = $wrapperDom.clientWidth,
47  $wrapperPadding = parseInt($wrapperStyle.getPropertyValue('padding-right'), 10),
48  $blockBWidth = $blockB.clientWidth,
49  $blockAMarigin = parseInt($blockAStyle.getPropertyValue('margin-right'), 10);
50
51// Aに当てはめる横幅を計算
52var $lastBlockWidth = $wrapperBoxWidth - (($wrapperPadding * 2) + $blockBWidth + $blockAMarigin + 1);
53
54// 最終的にAに適用
55$blockA.style.width = $lastBlockWidth + 'px';
56
57</script>
58</body>
59</html>

jQuery使えばもっと簡潔にいけます。

投稿2017/05/18 10:24

miyabi_pudding

総合スコア9555

子要素がブロックなのかインラインなのかわからんのですが、ブロック要素だとしてお答えしますと、
display: inline-block;
を使えば良いと思います。

ブロックBには

css
1B{
2   display: inline-block;
3}

で、文の長さに沿った幅のボックスが得られます。

ブロックAに関しては、横幅を指定して、

CSS
1A{
2   display: inline-block;
3   white-space: nowrap;
4   width: 80%;
5   overflow: hidden;
6   text-overflow: ellipsis;
7}

overflow:hiddenをつけないと分が最後まで表示されてしまいますので
text-overflow: ellipsisとセットで。
ブロックAと親要素の幅を適切に設定することで、
適切な結果が得られると思います。

ただ、この方法だと画面サイズによっては崩れることもありますので、
floatを使った方がよりお望みの結果になるかも知れません。

投稿2017/05/18 02:49

nora_kuragen

総合スコア101

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

block要素の子要素でtext-overflow:ellipsisを適用させるものとさせないものを使いたい

関連した質問