css。横並びBOXに長文textを流し込む方法

解決済

質問者：gucci524
質問日時：2014/05/15 18:52
回答数：1件

css。横並びBOXに長文textを流し込む方法はありますか？

CSSについてです。
高さ固定の横並び３連BOXに長文テキストを流し込む場合。
ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。

レイアウトのBOXサイズは固定だが、
テキストは文章の途中で隣のBOXへ移り、文字サイズの変更
（ブラウザやOSの違い）で隣のBOXへ移る位置も変わる。
これを実現させたいのですが、、、。

まぁ紙媒体においての、１ページ３段組みレイアウトの流し込みを
HTMLで可能なのか？という質問になります。

文書作成ツールやデザインアプリでは当たり前な方法ですが。
CSSでも可能なんでしょうか？

または、このようなことが可能な jQueryがありましたら
ご紹介ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/05/15 19:25

CSS3のcolumnsプロパティを使う。

[例]HTML5 + CSS3 ベンダーフィックスつき
★タブは＿に置換してあるので戻す。
★対応ブラウザが少ないので時期尚早でしょう。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">段組</h1>
＿</header>
＿<section>
＿＿<h2>段組の簡単な例</h2>
＿＿<section>
＿＿＿<p>
＿＿＿＿CSS。横並びBOXに長文textを流し込む方法はありますか？
＿＿＿</p>
＿＿＿<p>
＿＿＿＿CSSについてです。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿高さ固定の横並び３連BOXに長文テキストを流し込む場合。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿ブロック要素で区切るでもなく、センテンスの終わりでもない箇所で、複数のBOXにまたがるCSSになります。。。。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿レイアウトのBOXサイズは固定だが、
＿＿＿</p>
＿＿＿<p>
＿＿＿＿テキストは文章の途中で隣のBOXへ移り、文字サイズの変更
＿＿＿</p>
＿＿＿<p>
＿＿＿＿（ブラウザやOSの違い）で隣のBOXへ移る位置も変わる。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿これを実現させたいのですが、、、。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿まぁ紙媒体においての、１ページ３段組みレイアウトの流し込みをHTMLで可能なのか？という質問になります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿文書作成ツールやデザインアプリでは当たり前な方法ですが。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿CSSでも可能なんでしょうか？
＿＿＿</p>
＿＿</section>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

思いの外の早々のご回答に感謝します。

素晴らしく判り易いサンプルまで作成いただき、、、。
まさにコレです！！

ブラウザの対応が進んでいないのですね。
時期尚早とのアドバイス。了解しました！

columnsプロパティ。
勉強させていただきました！！！

ありがとうございます！

自分用に覚書。

CSS 多段レイアウト　multi-column layout

column-count 　段組みの数を特定した値に指定。
column-width 　段の幅の最小値を設定。

ベンダーフィックス
-moz-columns: 000px auto;
-webkit-columns: 000px auto;
-o-columns: 000px auto;
-ms-columns: 000px auto;

CSS3 Multiple Columns
http://www.w3schools.com/css/css3_multiple_colum …