如何使用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>