なぜ私のテキストオーバーフロー:省略記号。働きませんでしたか? -- html フィールド と css フィールド 関連 問題

why my text-overflow: ellipsis; did't work?












3
vote

問題

日本語

私はテキストが長すぎることを試みていた 9988777662 を使ったのですが、<コード> text-overflow: ellipsis; を使用していますか?

これは、 JSfillder

です。

私はそれがうまくいかなかったのかわからない?

これは私のHTMLコード

です <事前> <コード> <div class="profile-post-container"> <ul class="nav nav-tabs"> <li class="active btn-profile-post"><a data-toggle="pill" href="#post">Post</a></li> </ul> <div class="profile-post-answer-container tab-content"> <div id="post" class=" tab-pane fade in active"> <h3>Post</h3> <table class="table table-hover table-list"> <tr class="a"> <td class="b"> <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>"> <div class="list-block"> <p class="profile-post-setting"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </a> </td> </tr> <tr class="a"> <td class="b"> <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>"> <div class="list-block"> <p class="profile-post-setting"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </a> </td> </tr> <tr class="a"> <td class="b"> <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>"> <div class="list-block"> <p class="profile-post-setting"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </a> </td> </tr> </table> </div> </div> <div class="profile-seeall-container"> <a href="#"> <button class="btn content-btn see-all-button"> see all </button> </a> </div> </div>

これはCSSコード

です。 <事前> <コード> .profile-post-container { width: 80%; height: auto; margin: 2.5% auto; padding: 2.5% 1% 2.5% 1%; background-color: #ffffff; display: block; vertical-align: top; border-radius: 25px; } .profile-post-answer-container { width: 100%; height: auto; display: block; vertical-align: top; text-align: left; background-color: red; } .profile-seeall-container { width: 100%; height: auto; display: block; vertical-align: top; text-align: right; padding-right: 2.5%; background-color: blue; } .table-list { display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } h3 { margin-left: .5%; }
英語

i was trying to make the text wont be too long i have used overflow:hidden but how i use text-overflow: ellipsis;? i have used but it wont work.

here is the JSfillder of my code

i no sure why it didn't work?

this is my html code

<div class="profile-post-container">   <ul class="nav nav-tabs">     <li class="active btn-profile-post"><a data-toggle="pill" href="#post">Post</a></li>   </ul>   <div class="profile-post-answer-container tab-content">     <div id="post" class=" tab-pane fade in active">       <h3>Post</h3>       <table class="table table-hover table-list">         <tr class="a">           <td class="b">             <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">               <div class="list-block">                 <p class="profile-post-setting">                   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                 </p>               </div>             </a>           </td>         </tr>         <tr class="a">           <td class="b">             <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">               <div class="list-block">                 <p class="profile-post-setting">                   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                 </p>               </div>             </a>           </td>         </tr>         <tr class="a">           <td class="b">             <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">               <div class="list-block">                 <p class="profile-post-setting">                   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                 </p>               </div>             </a>           </td>         </tr>       </table>     </div>   </div>   <div class="profile-seeall-container">     <a href="#">       <button class="btn content-btn see-all-button">         see all       </button>     </a>   </div> </div> 

this is css code

.profile-post-container {   width: 80%;   height: auto;   margin: 2.5% auto;   padding: 2.5% 1% 2.5% 1%;   background-color: #ffffff;   display: block;   vertical-align: top;   border-radius: 25px; }  .profile-post-answer-container {   width: 100%;   height: auto;   display: block;   vertical-align: top;   text-align: left;   background-color: red; }  .profile-seeall-container {   width: 100%;   height: auto;   display: block;   vertical-align: top;   text-align: right;   padding-right: 2.5%;   background-color: blue; }  .table-list {   display: block;   width: 100%;   white-space: nowrap;   text-overflow: ellipsis;   overflow: hidden; }  h3 {   margin-left: .5%; } 
</div
     
 
 

回答リスト

2
 
vote
vote
ベストアンサー
 

div(.list-block)に特定の幅を与えるべきです。そしてPタグを取り外します。

 <コード> .profile-post-container {    width: 80%;    height: auto;    margin: 2.5% auto;    padding: 2.5% 1% 2.5% 1%;    background-color: #ffffff;    display: block;    vertical-align: top;    border-radius: 25px;  }    .profile-post-answer-container {    width: 100%;    height: auto;    display: block;    vertical-align: top;    text-align: left;    background-color: red;  }    .profile-seeall-container {    width: 100%;    height: auto;    display: block;    vertical-align: top;    text-align: right;    padding-right: 2.5%;    background-color: blue;  }    .list-block {    display: block;    width:100px;    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;  }    h3 {    margin-left: .5%;  }  
 <コード> <div class="profile-post-container">    <ul class="nav nav-tabs">      <li class="active btn-profile-post"><a data-toggle="pill" href="#post">Post</a></li>    </ul>    <div class="profile-post-answer-container tab-content">      <div id="post" class=" tab-pane fade in active">        <h3>Post</h3>        <table class="table table-hover table-list">          <tr class="a">            <td class="b">              <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">                <div class="list-block">                             aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                                  </div>              </a>            </td>          </tr>          <tr class="a">            <td class="b">              <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">                <div class="list-block">                      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                                  </div>              </a>            </td>          </tr>          <tr class="a">            <td class="b">              <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">                <div class="list-block">                       aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
 

you should give a specific width to the div (.list-block). and remove the p tag.

.profile-post-container {    width: 80%;    height: auto;    margin: 2.5% auto;    padding: 2.5% 1% 2.5% 1%;    background-color: #ffffff;    display: block;    vertical-align: top;    border-radius: 25px;  }    .profile-post-answer-container {    width: 100%;    height: auto;    display: block;    vertical-align: top;    text-align: left;    background-color: red;  }    .profile-seeall-container {    width: 100%;    height: auto;    display: block;    vertical-align: top;    text-align: right;    padding-right: 2.5%;    background-color: blue;  }    .list-block {    display: block;    width:100px;    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;  }    h3 {    margin-left: .5%;  }
<div class="profile-post-container">    <ul class="nav nav-tabs">      <li class="active btn-profile-post"><a data-toggle="pill" href="#post">Post</a></li>    </ul>    <div class="profile-post-answer-container tab-content">      <div id="post" class=" tab-pane fade in active">        <h3>Post</h3>        <table class="table table-hover table-list">          <tr class="a">            <td class="b">              <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">                <div class="list-block">                             aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                                  </div>              </a>            </td>          </tr>          <tr class="a">            <td class="b">              <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">                <div class="list-block">                      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                                  </div>              </a>            </td>          </tr>          <tr class="a">            <td class="b">              <a href="chatroom.php?chatroomID=<?php echo $row['id'];?>">                <div class="list-block">                       aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div
 
 
2
 
vote

このCSSTOを追加する必要があります。プロファイル設定要素:

<事前> <コード> .profile-post-setting { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 450px; }

このように要素は、テキストを表示しなければならない場所と楕円を表示する必要があるのか​​を知っています。あなたの例ではテキスト省略記号をテーブルに追加しました、そしてそれはDOM要素の省略記号をそれに陥っている責任を負いません。これは更新された jsfiddle

です。
 

You have to add this cssto the profile-post-setting element:

.profile-post-setting {     white-space: nowrap;     text-overflow: ellipsis;     overflow: hidden;     width: 450px; } 

This way the element knows how much space it has to show the text and when to show the ellipses. In your example you have added the text-ellipsis to the table and it is not responsible to show the ellipsis for a dom element deeoply nested on it. Here is the updated jsfiddle

</div
 
 
         
         
1
 
vote

あなたがそれを置きたいその要素の幅を言及してください。

<事前> <コード> .profile-post-setting { width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
 

Please Mention the width of that element on which you want to put it.

.profile-post-setting {     width: 350px;     white-space: nowrap;     text-overflow: ellipsis;     overflow: hidden;  } 
</div
 
 

関連する質問

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有