折り返しをしないで、後の表現をしない方法？

質問

http://but.mods.jp/mtos/

上記のブログで、左右２列にタイトルリストを並べました。
タイトル名が長い場合には、自動で折り返されて２行の表現になります。
しかし、スペースが足りない時は、折り返さずに、そこで表現を打ち切りたいです。

何か良い方法が有れば教えて下さい。

回答No.4

神崎 渉瑠（@taloo）

これでどうでしょうか。

.lino li{
height:1.1em;
overflow:hidden;
}

<ul>ではなく<ol>を使えば、番号は自動で表示されるようになります。

お礼

色々と試みましたが、tableタグを使わないと実現出来ないと思いました。
技量が上がれば解決できるかもしれませんが、現状では解決不可能です。
回答して頂きしまして、有難うございました。

回答No.3

noname#206842

zipのURLまちがえました。
http://www.nanden.asia/mtos/mtos.zipです。

参考URL：

http://www.nanden.asia/mtos/mtos.zip

お礼

色々と試みましたが、tableタグを使わないと実現出来ないと思いました。
技量が上がれば解決できるかもしれませんが、現状では解決不可能です。
回答して頂きしまして、有難うございました。

回答No.2

noname#206842

ソースを拝見しましたが、HTML自体の記述も間違いが多すぎます。
見た目だけで、制作していませんか？・・・
タグの意味を理解されないと、自由に編集できませんよ。

私だと、下記参考URLのように制作します。
お節介かもしれませんが、もう一度基礎を学習された方がいいとおもいますよ。

下記ソースは、↓～Downloadできます。
http://www.nanden.asia/mtos/temp.zip

参考URL：

http://www.nanden.asia/mtos/temp.html

お礼

色々と試みましたが、tableタグを使わないと実現出来ないと思いました。
技量が上がれば解決できるかもしれませんが、現状では解決不可能です。
回答して頂きしまして、有難うございました。

回答No.1

ORUKA1951

HTMLさえ、きちんとマークアップされていれば別に悩むことはなくて・・
　⇒HTMLのfloatタグの使い方？ - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q7965066.html )
　のNo.3の回答のCSSを

html,body{margin:0;padding:0;width:100%;}
div.section h2{display:none;}
div.section div.section h3{margin:0;line-height:25px;font-size:18px;text-align:center;}
div.section{width:100%;position:relative;}
div.section div.section ol{
width:45%;
padding: 0 0 0 5%;
margin: 10px 0.5%;
border-right:solid 1px gray;
overflow:hidden;
/*^^^^^^^^^^^^^*/:
}
div.section div.section ol+ol{
position:absolute;left:50%;top:26px;height:100%;
}
div.section div.section ol li{white-space:pre;}
/* 　　　　　　　　　　　　　　　^^^^^^^^^^^^^^^^*/

のふたつのプロパティを書き加えるだけです。
　HTMLは後でどのようにもデザインできるよう、シンプルに文書構造とか書かないこと。そうするとデザインの自由度は飛躍的に拡大しますし、そもそもメンテナンスも楽です。
　ちなみに、このHTMLとCSSだと[表示]から[スタイルシート]を選択し、スタイルシートなしにすると縦に並びますが、これはスマホなど幅の狭いディスプレイ用にもなると言うことです。

お礼

色々と試みましたが、tableタグを使わないと実現出来ないと思いました。
技量が上がれば解決できるかもしれませんが、現状では解決不可能です。
回答して頂きしまして、有難うございました。