CSS文字省略
2502 ワード
通常の項目では、固定幅の高い容器に文字が置けない場合がありますが、文字の余分な部分を隠して省略記号で表示する必要があります.実装方法は次のとおりです.
<style type="text/css">
.text{
width:80px;
height:20px;
border:1px solid #000000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor:pointer;
}
</style>
<div class="text" title=" "> </div>
</code></pre>
<p style="text-indent:50px;">white-space ：</p>
<table align="left" border="1">
<tbody>
<tr>
<td>normal</td>
<td style="width:541px;"> ， 。</td>
</tr>
<tr>
<td>pre</td>
<td style="width:541px;"> 。</td>
</tr>
<tr>
<td>nowrap</td>
<td style="width:541px;"> ， 。</td>
</tr>
<tr>
<td>pre-wrap</td>
<td style="width:541px;"> ， 。</td>
</tr>
<tr>
<td>pre-line</td>
<td style="width:541px;"> ， 。</td>
</tr>
<tr>
<td>inhert</td>
<td style="width:541px;"> white-space 。</td>
</tr>
</tbody>
</table>
<p style="text-indent:50px;">text-overflow ：</p>
<table align="left" border="1">
<tbody>
<tr>
<td>clip</td>
<td style="width:541px;"> 。</td>
</tr>
<tr>
<td>ellipsis</td>
<td style="width:541px;"> 。</td>
</tr>
<tr>
<td>string</td>
<td style="width:541px;"> 。（ ，Firefox9+ ， https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow）</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>