• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:Width指定の中に入り切らない文字をカットしたい)

Width指定の中に入り切らない文字をカットする方法は?

このQ&Aのポイント
  • 指定した幅に収まらない文字列の後ろをカットする方法について教えてください。
  • 特定の要素の幅に文字列が収まらず、改行されてしまう場合、どのように対処すればよいか教えてください。
  • width指定の中に収まらない文字を切り捨てる方法について教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

No.2です。  あとで気がついたのですが、ふたつのtableに分けているということは、ひょっとして前半はtableheaderで後半がtablebodyで、後半のtableはループ処理で複数出力される??  でしたら <table border="1" summary="List"><!-- summaryは必須 -->  <thead><!-- theadはゼロ個か1個 -->   <tr>    <th rowspan="2" abbr="No">No.</th><!-- abbrは必須 -->    <th rowspan="2" abbr="L3">L3種別</th>    <th rowspan="2" abbr="L4">L4細目</th>    <th rowspan="2" abbr="member">協力会社</th>    <th rowspan="2" abbr="count">設計数量</th>    <th rowspan="2" abbr="tani">単位</th>    <th rowspan="2" abbr="price">単価</th>    <th colspan="3" abbr="ThisM">当月(円)</th>    <th colspan="3" abbr="afterM">先月まで(円)</th>    <th colspan="3" abbr="total">累計(円)</th>   </tr>   <tr>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>   </tr>  </theade>  <tbody><!-- tbodyは本来必須でひとつ以上 -->   <tr> ・・・【中略】・・・  </tbody> </table> と、すると楽です。tableでループ処理していた部分を<tbody>で行えばよい。 仕様書 「 ⇒<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#edef-TABLE )」  footerも必要なら <table>  <thead>  </thead>  <tfoot>  </tfoot>  <tbody>  </tbody>  <tbody>  </tbody> ・・ </table>  です。これで幅が合わない問題は解決しますし、tableが複数のページに分かれても、印刷時に各ページに<thead><tfoot>が印刷されます。 ・・わざわざ、セルごとに幅を指定しなくても合います。そのほうがシンプルですし、正しいです。  

Horirin39
質問者

お礼

ORUKA1951さんご丁寧にありがとうございます。 おっしゃるとり、テーブルでループ処理して表示していました。 ありがとうございました。

その他の回答 (5)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

>(このように表示させたいのです)  tableの描画アルゴリズムで幅に収まらない場合は折り返すことになっています。 これは、様々なディスプレイのことを考えて定められています。  ⇒11.3 視覚系ユーザエージェントによる表の整形( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3 )  とても良く工夫されています。  よって、本当は幅を指定しないほうが良いのですが・・ウィンドウ幅やフォントサイズを変えて(Ctrl++)試されたらわかるように絶対にそのほうが良いです。  また、tableを使う限り、overflow:hiddenは使えません。     ^^^^^^^^^^^^^^^^^^  が回帰をウを防ぐ方法だけは示しておきます。 1) ブラウザの描画アルゴリズムを止めます。 white-space:プロパティを指定します。とりうる値は normal|pre|nowrap|pre-wrap|pre-line|inherit  です。 normal:標準の折り返し方法(半角スペース・改行ともひとつにまとめられる) pre: HTMLで言うところのpreと同じ(半角スペースや改行もそのまま) nowrap: 半角スペースはひとつにまとめられた上で改行を禁止 (pre-wrap):preと同様空白文字は消されませんが、行ボックスの端まで行くと自動的な改行がされます。 (pre-line):上記に加えて、ソース内の改行も有効です。 inherit: 継承(親の指定を引き継ぐ) ()の値は、CSS2.1で追加  よって、 table[summary="List"] tbody tr td:nth-child(2), table[summary="List"] tbody tr td:nth-child(3){white-space:nowrap;}  で改行はなくなります。 ※ table[summary="List"] tbody tr td{white-space:nowrap;}  でtbody内のすべてのtdについて改行が禁止されます。これがベストです。セル幅は指定しない!!!(内容によってtableの幅全体が伸縮します。)  なお、どうしてもにこだわるのでしたら、tableではなくリストでマークアップしてdisplay:inline-block、最悪floatで並べるしかないでしょう。

Horirin39
質問者

お礼

ORUKA1951さん、ご丁寧なお返事ありがとうございます。 あと1つ教えてください。 IE8,IE9で表示させると、各項目がへこんだ形になっています。(SAFARIでは各項目が黒線で囲まれています。)これをへこんだ形にしないで、罫線で区切るにはどうしたらよいのでしょうか。 よろしくご教授ください。

Horirin39
質問者

補足

ORUKA1951さん、おりがとうございます。 先ほどのお礼のなかで、へこんだ形になっている理由はわかりました。 border-collapse:collapse;/* 結合ボーダーモデル */ の指定がありませんでした。 申し訳ありませんでした。 これを指定すると項目と項目の間に白い罫線が表示されます。 この線にgrayなどの色を付けたいのですが、どのように指定すればいいのでしょうか。 度々で申し訳ありません。よろしくご教授ください。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

 javascriptから出力された最終のHTMLのソースをチェックすれば良いのですが、そのためにはfirefoxとそのアドオンのfirebugが必要です。  そこで、とりあえず仮のデータを入れたHTMLを作成してHTMLとスタイルシートの文法チェックをします。  私が利用しているのは [HTML]  ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) {CSS]  ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )  今回のサンプルはCSS3のものも含まれているので、サイトの[オプション]からCSS3をチェックしておくこと ★先のソースはタブを_に置換してあるので戻すこと  サイズを決めたければ、印刷用スタイルシート(media="print")を参考にしてください。  こんなシンプルなHTMLで大丈夫なのです。楽になればよいのですが(^^)  なお、CSS3の新しいプロパティも遊びで入れてあります。こんなことも新しいブラウザだとできるようになります。(IE9以降、およびfireefox,Opera,Chrome)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

ひょっとして読みやすいようにスペースを入れたものがそのまんまとか 実際の内容がわかりませんので、適当な値を入れたサンプルを <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> <style type="text/css"> <!-- table[summary="List"]{ border-collapse:collapse;/* 結合ボーダーモデル */ border:solid 1px black; } table[summary="List"] tbody tr {background-color:silver;} table[summary="List"] tbody tr:nth-child(2n) {background-color:aqua;} table[summary="List"] th{font-weight:normal;} table[summary="List"] td+td+td+td+td+td+td{text-align:right;} table[summary="List"] thead tr:first-child th:nth-child(8){background-color:red;} table[summary="List"] thead tr+tr th:nth-child(1){background-color:red;} table[summary="List"] thead tr+tr th:nth-child(2){background-color:red;} table[summary="List"] thead tr+tr th:nth-child(3){background-color:red;} table[summary="List"] tbody tr td:nth-child(8){background-color:red;} table[summary="List"] tbody tr td:nth-child(9){background-color:red;} table[summary="List"] tbody tr td:nth-child(10){background-color:red;} --> </style> <style type="text/css" media="print"> <!-- td{overflow:hidden;}/* はみ出したものは消す */ th[abbr="No"]{width:40em;} th[abbr="L3"]{width:45em;} th[abbr="L4"]{width:30em;} th[abbr="member"]{width:30em;} th[abbr="count"]{width:5em;} th[abbr="tani"]{width:1em;} th[abbr="price"]{width:10em;} th[abbr="ThisM"]{width:12em;} th[abbr="afterM"]{width:12em;} th[abbr="total"]{width:5em;} th[abbr="pCount"]{width:5em;} th[abbr="pCount2"]{width:5em;} th[abbr="pc"]{width:3em;} --> _</style> </head> <body> _<div class="header"> __<h1>タイトル</h1> __<p>このページでは・・・・</p> _</div> _<div class="section"> __<h2>見出し</h2> __<table border="1" summary="List"><!-- summaryは必須 --> ___<thead><!-- theadはゼロ個か1個 --> ____<tr> _____<th rowspan="2" abbr="No">No.</th><!-- abbrは必須 --> _____<th rowspan="2" abbr="L3">L3種別</th> _____<th rowspan="2" abbr="L4">L4細目</th> _____<th rowspan="2" abbr="member">協力会社</th> _____<th rowspan="2" abbr="count">設計数量</th> _____<th rowspan="2" abbr="tani">単位</th> _____<th rowspan="2" abbr="price">単価</th> _____<th colspan="3" abbr="ThisM">当月(円)</th> _____<th colspan="3" abbr="afterM">先月まで(円)</th> _____<th colspan="3" abbr="total">累計(円)</th> ____</tr> ____<tr> _____<th abbr="pCount">出来形数量</th> _____<th abbr="pCount2">出来高</th> _____<th abbr="pc">%</th> _____<th abbr="pCount">出来形数量</th> _____<th abbr="pCount2">出来高</th> _____<th abbr="pc">%</th> _____<th abbr="pCount">出来形数量</th> _____<th abbr="pCount2">出来高</th> _____<th abbr="pc">%</th> ____</tr> ___</thead> ___<tbody><!-- tbodyは本来必須でひとつ以上 --> ____<tr> _____<td>1</td> _____<td>ABC</td> _____<td>abc</td> _____<td>ABC社</td> _____<td>25</td> _____<td>台</td> _____<td>100</td> _____<td>20</td> _____<td>2000</td> _____<td>80</td> _____<td>25</td> _____<td>2500</td> _____<td>100</td> _____<td>20</td> _____<td>2000</td> _____<td>80</td> ____</tr> ____<tr> _____<td>2</td> _____<td>ABC</td> _____<td>abc</td> _____<td>EFG社</td> _____<td>100</td> _____<td>台</td> _____<td>100</td> _____<td>80</td> _____<td>8000</td> _____<td>80</td> _____<td>100</td> _____<td>10000</td> _____<td>100</td> _____<td>70</td> _____<td>7000</td> _____<td>70</td> ____</tr> ____<tr> _____<td>1</td> _____<td>ABC</td> _____<td>abc</td> _____<td>ABC社</td> _____<td>25</td> _____<td>台</td> _____<td>100</td> _____<td>20</td> _____<td>2000</td> _____<td>80</td> _____<td>25</td> _____<td>2500</td> _____<td>100</td> _____<td>20</td> _____<td>2000</td> _____<td>80</td> ____</tr> ___</tbody> __</table> _</div> _<div class="footer"> __<h2>文書情報</h2> _</div> </body> </html>

Horirin39
質問者

お礼

何度もご丁寧にご回答いただきましてありがとうございます。 いただいたコーディングを試して見ました。 画面用のCSSを作り、widthをPXで指定しました。 テストデータの中に、L3種別とL4細目に”あいうえおかきくけこさしすせそ”を入れて見ますと、L3種別もL4細目も途中で改行されて2行に表示されてしまいます。 L3種別はwidth:100px、L4細目はwidth:180pxとしました。 CSSの中の td{overflow:hidden;}/* はみ出したものは消す */の指定で、L3種別は100PXに入るだけ表示”あいうえおかきく”されるのではないでしょうか。(このように表示させたいのです) 何度も教えていただきお手数をおかけします。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

わざわざHTMLを使う意味が?? 【引用】____________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より  HTMLでページを作成すると言うことは、これが唯一最大の目的です。 tableは、  ⇒視覚系ユーザエージェントによる表の整形( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3 )  すべての幅の固定をやめてしまえば、ブラウザはきちんと収まるように整形してくれますよ。  また印刷用スタイルシートを別途指定して、印刷時には、A4横に印刷できるよう細かく指定すれば良いです。PDFなみにきちんと整形できます。 具体的には <table border="1" summary="List"><!-- summaryは必須 -->  <tbody><!-- tbodyは本来必須です。 -->   <tr>    <th rowspan="2" abbr="No">No.</th><!-- abbrは必須 -->    <th rowspan="2" abbr="L3">L3種別</th>    <th rowspan="2" abbr="L4">L4細目</th>    <th rowspan="2" abbr="member">協力会社</th>    <th rowspan="2" abbr="count">設計数量</th>    <th rowspan="2" abbr="tani">単位</th>    <th rowspan="2" abbr="price">単価</th>    <th colspan="3" abbr="ThisM">当月(円)</th>    <th colspan="3" abbr="afterM">先月まで(円)</th>    <th colspan="3" abbr="total">累計(円)</th>   </tr>   <tr>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>   </tr>   <tr>    <td><%=showLv3%></td>    <td><%=showLv4%></td>    <td><%=showkrk%></td>    <td><%=StringUtil.formatNum(info.getDsnsry())%></td>    <td></td>    <td></td>    <td><%=StringUtil.formatNum(info.getSmktnk())%></td>    <td><%=StringUtil.formatNum(info.getTmmdkgsry())%></td>    <td><%=StringUtil.formatNum(info.getTmmdkdmny())%></td>    <td><%=showrtuT%></td>    <td><%=StringUtil.formatNum(info.getZmmdkgsry())%></td>    <td><%=StringUtil.formatNum(info.getZmmdkdmny())%></td>    <td><%=showrtuZ%></td>    <td><%=StringUtil.formatNum(info.getRuidkgsry())%></td>    <td><%=StringUtil.formatNum(info.getRuidkdmny())%></td>    <td><%=showrtuR%></td>   </tr>  </tbody> </table> たったこれだけで良いです。 ヘッダ内でスタイルシートで <style type="text/css"> <!-- table[summary="List"]{ border-collapse:collapse;/* 結合ボーダーモデル */ border:solid ipx black; } table[summary="List"] th{font-weight:normal;} table[summary="List"] td+td+td+td+td+td+td{text-align:right;} --> </style> <style type="text/css" media="print"> <!-- td{overflow:hidden;}/* はみ出したものは消す */ th[abbr="No"]{width:40em;} th[abbr="L3"]{width:45em;} th[abbr="L4"]{width:30em;} th[abbr="member"]{width:30em;} th[abbr="count"]{width:5em;} th[abbr="tani"]{width:1em;} th[abbr="price"]{width:10em;} th[abbr="ThisM"]{width:12em;} th[abbr="afterM"]{width:12em;} th[abbr="total"]{width:5em;} th[abbr="pCount"]{width:5em;} th[abbr="pCount2"]{width:5em;} th[abbr="pc"]{width:3em;} --> </style> とでもしておけば良いですよ。 後半は印刷用なので、幅はmmで、フォントサイズはptで指定し、必要ならth,tdにpaddongを適当に指定すると良いでしょう。

Horirin39
質問者

お礼

OKURA1951さんありがとうございます。 丁寧な解説で初心者の私にもわかりやすいです。 これをお手本に修正してみます。

Horirin39
質問者

補足

OKURA1951様 早速書き換えて見ましたが、意図した画面になりませんでした。 ひどく崩れた画面が表示されました。画像が添付できないので、主なところを書きますと、 ・ヘッダー部分が画面(1280PX)の3分の2ほどに表示されている。 ・データ部分が表になっていない。(2行目以降罫線が出ていない) ・2行目以降はヘッダーと合っていない。 HTMLもCSSも初心者ですので、理解不測をたいへん申し訳なく思います。 私のCSSの使い方が間違っているよう思いますが、よくわかりません。 恐れ入りますが、お教えいただければありがたいです。 修正したソース <html> <head> <title>工事実行予算管理システム</title> <style type="text/css"> table[summary="List"]{ border-collapse:collapse;/* 結合ボーダーモデル */ border:solid ipx black; } table[summary="List"] th{font-weight:normal;} table[summary="List"] td+td+td+td+td+td+td{text-align:left;} </style> <style type="text/css" > td{overflow:hidden;}/* はみ出したものは消す */ th[abbr="No"]{width:30px;} th[abbr="L3"]{width:90px;} th[abbr="L4"]{width:100px;} th[abbr="member"]{width:110px;} th[abbr="count"]{width:80px;} th[abbr="tani"]{width:35px;} th[abbr="price"]{width:80px;} th[abbr="ThisM"]{width:210px;} th[abbr="afterM"]{width:210px;} th[abbr="total"]{width:210px;} th[abbr="pCount"]{width:80px;} th[abbr="pCount2"]{width:90px;} th[abbr="pc"]{width:40px;} </style> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/kjiact.css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"><meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"></head> JAVA SCRIPT <table border="1" summary="List"><!-- summaryは必須 -->  <thead><!-- theadはゼロ個か1個 -->   <tr>    <th rowspan="2" abbr="No">No.</th><!-- abbrは必須 -->    <th rowspan="2" abbr="L3">L3種別</th>    <th rowspan="2" abbr="L4">L4細目</th>    <th rowspan="2" abbr="member">協力会社</th>    <th rowspan="2" abbr="count">設計数量</th>    <th rowspan="2" abbr="tani">単位</th>    <th rowspan="2" abbr="price">単価</th>    <th colspan="3" abbr="ThisM">当月(円)</th>    <th colspan="3" abbr="afterM">先月まで(円)</th>    <th colspan="3" abbr="total">累計(円)</th>   </tr>   <tr>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>    <th abbr="pCount">出来形数量</th>    <th abbr="pCount2">出来高</th>    <th abbr="pc">%</th>   </tr>  </theade>  <tbody><!-- tbodyは本来必須でひとつ以上 -->   <tr> <%JAVA LOOPコーディング%> <tr>    <td><%=showLv3%></td>    <td><%=showLv4%></td>    <td><%=showkrk%></td>    <td><%=StringUtil.formatNum(info.getDsnsry())%></td>    <td></td>    <td></td>    <td><%=StringUtil.formatNum(info.getSmktnk())%></td>    <td><%=StringUtil.formatNum(info.getTmmdkgsry())%></td>    <td><%=StringUtil.formatNum(info.getTmmdkdmny())%></td>    <td><%=showrtuT%></td>    <td><%=StringUtil.formatNum(info.getZmmdkgsry())%></td>    <td><%=StringUtil.formatNum(info.getZmmdkdmny())%></td>    <td><%=showrtuZ%></td>    <td><%=StringUtil.formatNum(info.getRuidkgsry())%></td>    <td><%=StringUtil.formatNum(info.getRuidkdmny())%></td>    <td><%=showrtuR%></td>   </tr>  </tbody> </table> <% JAVA LOOPのEND%> </div> </html:form>

noname#206842
noname#206842
回答No.1

overflow:none;でいいのでは?・・・ でも、HTMLは文章構造を記述するものです。 <table>要素にする必要があるのだろうか?・・・ それと6行目の<td>タグが、閉じられていません(要修正) 全体の幅が、広すぎるのでは?・・・ WEBページは、閲覧者の環境を選べないことを理解すれば、この設定では、デバイスの制限がおおすぎるのでは?・・・

Horirin39
質問者

お礼

さっそくのご回答ありがとうございます。 6行目の<td>タグの>を投稿する時に削除してしまいました。 申し訳ありません。 このページは契約された企業向けのページです。契約時に画面解像度の条件やブラウザの指定をさせていただいています。

Horirin39
質問者

補足

nanden1548さん、調査しましたところ、overflow:noneという指定が無いようで、overflow:hiddenがそれではないかと思われますが、正しいでしょうか?

関連するQ&A