用CSS讓過長文字自動以「…」呈現

by anguskh
css, php

在表格或固定寬高的地方，文字超過可視範圍需要以「…」來呈現較為整齊的可視區域。方法便是在文字區塊內加上text-overflow: ellipsis; 、white-space: nowrap; 及 overflow:hidden;

Thank you for reading this post, don't forget to subscribe!

表格結構如下

<table class="table table-bordered table-hover log_list">
	<thead>
		<tr>
		<th class="text-center">操作說明</td>
		<th class="text-center">修改前內容 / 修改後SQL</td>
		<th class="text-center">IP</td>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td class="text-left td40"><span class="line_hidden"><?php echo $log['memo']; ?></span></td>
		<td class="text-left td40"><span class="line_hidden"><?php echo $log['sql_cmd']; ?></span></td>
		<td class="text-center"><?php echo $log['ip_address']; ?></td>
	</tr>
	</tbody>
</table>
<style type="text/css">
.log_list th, .log_list td {
	white-space: nowrap !important;
}
.log_list .td40 {
	white-space: unset !important;
	word-break: break-all;
	width: 40%;
	overflow: hidden;
}
.log_list .td40 .line_hidden {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	overflow:hidden;
}

</style>

參考網頁 https://www.webdesigns.com.tw/css_text-overflow.asp