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: