実現したいこと

画像赤枠の形でテキストに折り返し指定をかけたいです。

発生している問題・分からないこと

HTML, CSS ( PHP, Mysql, Javascript )
上記を利用して書類を電子化するシステムを開発しています。
1つのテーブルセル内に住所と電話番号が記載されているのですが、
「1行目を住所、2行目を電話番号(右寄せ)」となっています。
書類のレイアウト上、幅が少し狭いため住所に折り返し指定をかけたいです。
ですが、1回の折り返しで住所と電話番号で3行になることは避けなければなりません。
そのため添付画像のようにTELを避けた赤枠部分でのみ折り返しがかかるようにする必要があります。
これがどうしても実現できません。
なにか方法はないでしょうか？

よろしくお願いいたします。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

HTML
1<table>
2  <tr>
3    <td style="position: relative;">
4      <p>{住所}</p>
5      <p style="position: absolute; right: 0; bottom: 0;">TEL：{電話番号}</p>
6    </td>
7  </tr>
8</table>

当初このように書いていましたが、想定より住所が長いと文字が重なる問題があります。
(細かいスタイルは省略しています)

補足

画像のように3行になった際に2行目の住所が幅を100%利用しない形でも問題ありません。
（2行目以降は電話番号の幅を考慮する）

Javascript等を利用しても構いません。

utm.

2025/02/20 05:21

TEL() の配置は重要ですか？質問文には右寄せとありますが、添付画像では完全に右寄せにはなっていないかと思いますが、何か基準となるルールはございますか？また、住所は、2行目以降は行に対する半分の幅で途切れ、途切れる文が幅全て+半分に入る場合は次の行へ移動するのですか？

Lhankor_Mhy

2025/02/20 05:34

『1回の折り返しで住所と電話番号で3行になることは避けなければなりません』とのことですが、住所住所住所住所住所住所住所住所＿＿＿＿電話番号 ↑これはダメで↓があるべき住所住所住所住所住所住所住所住＿所＿＿＿電話番号という理解で合っていますか？（＿はスペース）

juner

2025/02/20 08:03

ニュアンス自体はこれだろうか……？（ただし、要js https://qiita.com/kazhashimoto/items/b3d9cb1f8dfdb00a028e

osakuramochi

2025/02/20 08:31

utm. さん TEL (000) 000-000 というデータが入ってくることを想定しています。そのため右寄せがわかりづらくなってしまいました。失礼いたしました。住所の2行目以降は幅を「100% - {TELの幅}」として折り返しされるイメージです。よろしくお願いいたします。

osakuramochi

2025/02/20 08:38

Lhankor_Mhy さん折り返しがない状態でも住所とTELは2行に分かれています。ーーーーーーー住所住所住所　　　TEL( ) ーーーーーーーですが、1回目の折り返しで、ーーーーーーー住所住所住所住所　　　TEL( ) ーーーーーーー上記の状態になるのを防ぎたいです。下記の状態が理想です。ーーーーーーー住所住所住所住所　TEL( )

osakuramochi

2025/02/20 08:44

juner さんかなり近いです！！現状記事を読みきれていませんが、参考にさせていただきます。ありがとうございます！

Lhankor_Mhy

2025/02/20 09:00

> 下記の状態が理想です。 > ーーーーーーー > 住所住所住所 > 住所　TEL( ) 住所自体は2行に押し込むことが可能だが電話番号を押し込むことができない場合、住所を2行にするのか3行にするのか、という質問だったのですが……　どうやらご解決されそうなので、おめでとうございます。

osakuramochi

2025/02/20 09:13

Lhankor_Mhy さん理解力がなく申し訳ありません... 元々住所を3行とする想定でしたが、皆さんの回答でTELを改行するパターンでも問題ないことに気がつきました... 質問いただきありがとうございました。お手数をおかけしました。

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

回答4件

ベストアンサー

住所要素内に電話番号要素と同じ幅のインラインブロック要素を追加すればどうでしょう。

html
1<table>
2  <tr>
3    <td class="person-data"> 
4      <div class="address">
5        住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住
6        <span></span>
7      </div>
8
9      <div class="tel">
10        TEL：012-345-6789
11      </div>
12    </td>
13  </tr>
14</table>

css
1.person-data {
2  position: relative;
3  width: 20rem;
4  border: blue solid 1px;
5}
6.person-data .address span {
7  display: inline-block;
8  width: 10rem;
9  height: 1rem;
10}
11.person-data .tel {
12  position: absolute;
13  right: 0;
14  bottom: 0;
15  width: 10rem;
16  padding-left: 0.5rem;
17}

上記サンプルではspan要素を挿入してますが、::after疑似要素を使えばHTMLをいじる必要はないです。
下記は::after疑似要素をつかったサンプルです。

投稿2025/02/20 05:36

総合スコア34180

2025/02/20 08:50

ご回答ありがとうございます！かなりイメージに近いかもしれません！これをもとに少し調整をして試してみます。

osakuramochi

2025/02/20 09:16

こちらで問題なく実装が叶いそうです！ありがとうございました！

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

min-heightを使って無理やりコンテナ領域を引き延ばす方法もあるかと思います。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8
9    <style>
10        .box {
11            width: 30em;
12            position: relative;
13        }
14        
15        .address {
16            min-height: 3em;
17            display: inline-block;    
18        }
19        .tel {
20            position: absolute;
21            bottom: 0; 
22            right: 0;
23        }
24
25        p {
26            padding: 0%;
27            margin: 0%;
28        }
29
30
31    </style>
32</head>
33
34<body>
35
36    <table>
37        <tr>
38            <td class="box">
39                <p class="address">住所住所住所住所住</p>
40                <!-- <p class="address">住所住所住所住所住住所住所住所住所住住所住所住所住所住住所住所住所住所住</p> -->
41                <!-- <p class="address">住所住所住所住所住住所住所住所住所住住所住所住所住所住住所住所住所住所住住所住所住所住所住住所住所住所住所住住所住所住所住所住住所住所住所住所住</p> -->
42                <p class="tel">TEL：123-1234-1234</p>
43            </td>
44        </tr>
45    </table>
46</body>
47
48</html>

投稿2025/02/21 05:02

utm.

総合スコア524

CSSの制御では厳しいような気がしますのでもう大喜利レベルになりますがこんな感じでどうでしょう？

html
1<style>
2.wrap{
3width:200px;
4border:1px solid;
5position:relative;
6}
7.l{
8background-Color:lime;
9}
10.r{
11background-Color:yellow;
12position:absolute;
13right:0;
14bottom:0;
15}
16</style>
17<script>
18window.addEventListener('DOMContentLoaded', ()=>{
19  document.querySelectorAll('.l').forEach(element=>{
20    const range = document.createRange();
21    range.selectNodeContents(element);
22    const rects = range.getClientRects();
23    const p1 = rects[rects.length -1 ].right;
24    const rect = element.nextElementSibling.getBoundingClientRect();
25    const p2 = rect.left;
26    if(p1>p2) element.after(document.createElement('br'),document.createElement('br'));
27  });
28});
29</script>
30<div class="wrap">
31<span class="l">あああああああああああああああああああああああああああああああ</span>
32<span class="r">いいいいいい</span>
33</div>
34<div class="wrap">
35<span class="l">あああああああああああああああああああああああああああああああああ</span>
36<span class="r">いいいいいい</span>
37</div>
38<div class="wrap">
39<span class="l">ああああああああああああああああああああああああああああああああああああ</span>
40<span class="r">いいいいいい</span>
41</div>
42</div>
43<div class="wrap">
44<span class="l">ああああああああああああああああああああああああああああああああああああああああ</span>
45<span class="r">いいいいいい</span>
46</div>
47</div>

左要素の末尾のX座標と右要素の先頭のX座標をくらべて、食い込んでいたら２行改行する

追記

どうせなら動的に処理できるようにこんな感じ
(ブラウザの幅を変えると動的に避けてくれる)

html
1<style>
2.wrap{
3border:1px solid;
4position:relative;
5}
6.l{
7background-Color:lime;
8}
9.r{
10background-Color:yellow;
11position:absolute;
12right:0;
13bottom:0;
14}
15</style>
16<script>
17const crossing=()=>{
18  document.querySelectorAll('.l').forEach(element=>{
19    element.parentNode.querySelectorAll('br').forEach(x=>x.remove());
20    const range = document.createRange();
21    range.selectNodeContents(element);
22    const rects = range.getClientRects();
23    const p1 = rects[rects.length -1 ].right;
24    const rect = element.parentNode.querySelector('.r').getBoundingClientRect();
25    const p2 = rect.left;
26    if(p1>p2) element.after(document.createElement('br'),document.createElement('br'));
27    console.log([p1,p2]);
28    
29  });
30}
31window.addEventListener('DOMContentLoaded',crossing);
32window.addEventListener('resize',crossing);
33
34</script>
35<div class="wrap">
36<span class="l">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</span>
37<span class="r">いいいいいい</span>
38</div>
39<div class="wrap">
40<span class="l">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</span>
41<span class="r">いいいいいい</span>
42</div>
43<div class="wrap">
44<span class="l">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</span>
45<span class="r">いいいいいい</span>
46</div>
47<div class="wrap">
48<span class="l">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</span>
49<span class="r">いいいいいい</span>
50</div>

投稿2025/02/20 08:20

編集2025/02/20 08:51

yambejp

総合スコア117203

osakuramochi

2025/02/20 09:08

ご回答ありがとうございます！実際に調整して試してみます！追記について動的パターンまでご丁寧にありがとうございます... こちらも参考にさせていただきます。

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

td要素の幅と高さを決める
p要素をdiv要素にする。
住所の位置を左上にする。
- 住所が長すぎると、td要素からはみ出す。
電話番号の位置を右下にする。そして背景を白にする。
- 住所が長いと後半が電話番号に隠される。

「複雑な折り返し」にはなっていませんが、見た目だけは...

html
1    <table>
2      <tr>
3        <td
4          style="
5            position: relative;
6            width: 12rem;
7            height: 4.5rem;
8            border: blue solid 1px;
9          "
10        >
11          <div style="position: absolute; left: 0; top: 0; text-wrap: wrap">
12            住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所住所
13          </div>
14          <div
15            style="
16              position: absolute;
17              right: 0;
18              bottom: 0;
19              background-color: white;
20              padding-left: 0.5rem;
21            "
22          >
23            TEL：{電話番号}xxx
24          </div>
25        </td>
26      </tr>
27    </table>