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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

1561閲覧

CSSでもじの中を省略したい

Nippun

総合スコア1147

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/07/21 04:20

CSS

1white-space: nowrap; 2overflow: hidden; 3text-overflow: ellipsis;

この場合だと'fasfsaf...'のように最後の部分が省略されますが'fdsa..gjkl'のように中を省略させたいのですが調べても出てきません。
どのようにすればいいでしょうか?

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

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

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

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

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

bwz61366

2018/07/21 06:46

...どうしてもCSSでやりたいですか?JavaScriptを使ってはいけないのですか?
Nippun

2018/07/21 06:58

どうしてもというわけではありませんができればCSSで行いたいです
m.ts10806

2018/07/21 07:06

中略は装飾を役割とするcssの範疇ではないかと。固定箇所ならともかく動的にするには文字列操作しなきゃいけません。
guest

回答2

0

ベストアンサー

CSSオンリーだと、どうしても「・・・」の後ろに表示する文字をHTMLの構造として書いておくとかしないとだめなので、面倒ですね・・・。

HTML

1<div> 2 <span>fasfsaffasfsaffasfsafgjkl</span> 3 <span>fasfsaffasfsaffasfsafgjkl</span> 4</div>

CSS

1span 2{ 3 display: inline-block; 4 overflow: hidden; 5 white-space: nowrap; 6} 7span:first-child 8{ 9 width: 5em; 10 text-overflow: ellipsis; 11} 12span:last-child 13{ 14 width: 2em; 15 text-align: right; 16 direction: rtl; 17}

あとは、data-*属性で「・・・」の後ろに表示する文字を持っておいて、それをafter擬似要素とかで表示するとかいう方法でもいける気がします。

投稿2018/07/21 07:11

bwz61366

総合スコア2009

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

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

bwz61366

2018/07/21 07:25

あと、適当に`span:first-child`のwidthをパーセント指定とかにしてやると、横幅によって省略される文字数が変化するような中略表現も可能だと思います。
guest

0

css-crop-string-in-the-middle

bwz61366さんが書いている方法などが載ってます。

投稿2018/07/21 10:28

oikashinoa

総合スコア2826

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問