table td displays two lines of text, with End, incompatible solution in 360 compatibility mode.

table td displays two lines of text, with End, incompatible solution in 360 compatibility mode.
This is a div that includes table.

<div style="margin-left: -16px;width:850px;">
                                    <table class="right-table" id="tableT" border="0" style="margin-bottom:-1px;width:850px;" cellspacing="0" cellpadding="0">
                                        <stw:if test="${empty array }">                            
                                            <tr align="center" >
                                                <td class="text-grey"><span  style="color:#666666;">No template</span></td>
                                            </tr>
                                        </stw:if>
                                        <stw:if test="${not empty array }">
                                            <stw:for items="${array}" var="array1" varStatus="array1Status">
                                            <stw:if test="${array1Status.index<10 }">
                                            <tr>                                           
                                                <td onclick="Model('${array1.templateId}')" class="text-gray ruguo"><p id="${array1.templateId}">${array1.modelContent}</p></td>
                                            </tr>
                                            </stw:if>
                                            </stw:for>
                                        </stw:if>
                                    </table>
  </div>
  .ruguo{
             *display:inline-block;*
             height: 50px;
             width: 850px;
             word-break: break-all;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
             border-bottom:1px #DDD solid;
        }
        .ruguo p{
             margin-top:-9px;
             text-align: left;
             cursor: pointer;
             line-height:22px;
        }

If there is no code with * label, IE can be displayed normally except for 360 compatibility mode, but the effect cannot be achieved in 360 compatibility mode and IE.
With the * tag, you can also achieve the effect in ie, 360 compatibility mode, but there is no , if you have to , you can use the absolute positioning Get to where you want to be.
design sketch:

Keywords: IE

Added by fatmikey on Sat, 02 May 2020 04:45:58 +0300