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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

4回答

8991閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2017/05/18 01:30

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

赤い部分が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よろしくお願いします。
5o5o_wagon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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 dlbox-sizing:border-box;が必要かも。

投稿2017/05/18 11:28

編集2017/06/06 05:13
LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

LibertyBell3

2017/06/06 05:17

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

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

子要素がブロックなのかインラインなのかわからんのですが、ブロック要素だとしてお答えしますと、
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.50%

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

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

質問する

関連した質問