如何使用HTML，CSS或/和Bootstrap獲取Gmail中的郵箱列表？

Question

我已經寫了一些代碼來獲取所有已發送郵件的列表，我正在獲取列表，問題是當列表加載時還顯示了郵件正文內容，我只想顯示類似Gmail框列表的郵箱。 我的郵件正文內容包含多個標簽，例如“''

''' 標簽。 當我們在“正文”中的“郵件正文”中輸入一些內容時，將自動生成這些p標簽。

 <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To : </strong><small>{{To}}</small> <strong>Subject : </strong><small>{{MailSubj}}-</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">Helper.datefunction("{{SentDate}}")</small> <strong class="pull-right">Sent Date: </strong></a></li> 

您可以在summernote在線編輯器中復制粘貼以上代碼，並增加“郵件summernote ”內容，將其轉到下一行，“不應”。 跳過更多內容。

Answer 1

這確實很混亂，而且很公平，會導致生產不穩定，但是會突出一些方面，您可以嘗試獲取原型並可能找到更好的解決方案。 正如喬恩·P。（Jon P.）所說。 您確實不希望使用未正確包含類的HTML來填充代碼，並且由於HTML節點數量眾多而使應用程序變慢。

這是一個開始，希望您能獲得一些基礎知識來改善它。

 li small:nth-of-type(3) { display: none; } .list-group-item { list-style: none; display: flex; border-bottom: 1px solid; } .list-group-item a { display: flex; flex: 1; height: 40px; align-items: center; font-family: Arial; font-size: 14px; } small { order: 2; } strong { order: 1; } ul { list-style: none; padding: 0; } .list-group-item { list-style: none; display: flex; border-bottom: 1px solid; } .thumb-sm { max-width: 20px; } .list-group-item a { display: flex; flex: 1; height: 40px; align-items: center; font-family: Arial; font-size: 14px; } li span { flex: 1; } li a { color: black; text-decoration: none; } 

 <ul> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> </ul>