突き出し

見積書と請求書をエクセルで入力し、PDFに書き出していました。ただ、レイアウトをもうちょっとなんとかしたくて、情報を入力しPDF化するアプリを作成中。PDFの出力にはLaravel-DomPdfを使っています。書面のレイアウトをCSSでデザインするのですが、FelxBoxが使えないので、Tableでガチガチに固める方法を採用しました。およそ25年ぶりくらいのテーブルレイアウト。テーブルの入れ子も当然のように使って、あらかたレイアウトが完成したのですが、長い文章だと文章が折り返さずに隣の領域までぶち抜いていってしまうのです。その現象が解決したので、メモ。

元のレイアウト用のテーブルにtable-layout: fixed;する。すると、テーブルがPDF上で固定される。しかし、固定されただけで、文章のぶち抜き現象は解消しませんでした。

.header, .footer {
 width: 100%;
 table-layout: fixed;
}
.header .left, .footer .left {
 width: 45%;
 vertical-align: top;
}
.header .center, .footer .center {
 width: 10%;
 vertical-align: top;
}
.header .right, .footer .right {
 width: 45%;
 vertical-align: top;
}

 次に文章を折り返す設定が必要。HTMLの構造は.leftの中に.greeting_areaがあり、そこに長い文章があるのでword-wrap: break-word; word-break: break-all;を加えると、なんとか折り返すことができました。望む姿がそこにありました。

.greeting_area {
 margin-top: 35px;
 font-size: 13px;
 word-wrap: break-word;
 word-break: break-all;
}

white-spaceも試しましたが、行間が異様に空いたり、ぶち抜き現象は変わらずだったため、削除。使いませんでした。