任何人能否举出一个特别安全局的例子,说明我如何建立一个表格,把长篇的文本压缩到“......”。
http://jsfiddle.net/NpABe/>。
<table>
<tr>
<td>aaaa</td>
<td>ssssssss</td>
<td>dddddddddddd</td>
</tr>
<tr>
<td>ffffffffffffffff</td>
<td>gggggggggggggggggggg</td>
<td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
</tr>
<tr>
<td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
<td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
<td>llllllllllllllllllllllllllllllllllll</td>
</tr>
</table>
使用<代码>文本流:斜线。 你们需要确定牢房的宽度,防止线性包装:
td {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<>strong>EDIT:这实际上赢得了一定的工作。 似乎需要一个集装箱干s,以便:
<table>
<tr>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td>
(snip)
之后:
td div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<EDIT 2 Ah有办法,但只有使用<代码>表-layout:固定:
table {
table-layout: fixed;
width: 100px;
}
td {
white-space: nowrap;
overflow: hidden; /* <- this does seem to be required */
text-overflow: ellipsis;
}
<>2021 UPDATE - PURE CSSworkingING VERSION
得到接受的答案是,对我来说,trick不了。
无需具体说明<代码>min-width的仅能使用line-clamp。
.clamp {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 1;
-webkit-line-clamp: 1;
}
.clamp-2 {
line-clamp: 2!important;
-webkit-line-clamp: 2!important;
}
.clamp-3 {
line-clamp: 3!important;
-webkit-line-clamp: 3!important;
}
由于IEE(Finally)正在死亡,被“边缘”取代,现在(几乎)全球支持为96%。
可以通过在<条码>上指定一个<<>最大<>>>>>/代码”和<条码>流-y:隐蔽,来提供电传支持。
.clamp {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 1;
-webkit-line-clamp: 1;
}
.clamp-2 {
line-clamp: 2!important;
-webkit-line-clamp: 2!important;
}
.clamp-3 {
line-clamp: 3!important;
-webkit-line-clamp: 3!important;
}<table>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Context</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">French Revolution</th>
<td class="clamp clamp-3"><span style="color:red;">Clamp 3 lines</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
<td>1789</td>
</tr>
<tr>
<th scope="row">First Republic</th>
<td class="clamp clamp-2"><span style="color:red;">Clamp 2 lines</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
<td class="text-center text-decoration-line-through">1792</td>
</tr>
<tr>
<th scope="row">Star Wars: A New Hope</th>
<td class="clamp clamp-1"><span style="color:red;">Clamp 1 lines</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
<td>1977</td>
</tr>
</tbody>
</table>这对我来说是一件好事。 我界定了以下特别安全局:
td.item-node {
max-width: 10em;
}
div.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
而“超文本”则视而不见。
<td class="item-note">
<div class="ellipsis">Really super duper long item note that will truncate</div>
</td>
这样,我就可以具体说明我所关心的事项(桌子)的宽度,而不必重复每个囚室的所有白天空间、高空住房。 div上课也明确了其目的。
You can make truncate class for long text. See below class [This works on table td]
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 1px;
}
Works for others:
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
c 案文流:斜线;
td {
display: inline-block;
width: 150px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}<table>
<tr>
<td>aaaa</td>
<td>ssssssss</td>
<td>dddddddddddd</td>
</tr>
<tr>
<td>ffffffffffffffff</td>
<td>gggggggggggggggggggg</td>
<td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
</tr>
<tr>
<td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
<td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
<td>lllllllllllllllllllllllddddddddddddddddddddddddddddddddddddlllllllllllll</td>
</tr>
</table>If you need truncate text for just one line use this css:
.truncate-text-one-line{
width:80%;
height: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
否则,使用这一文字:
function shorten_text(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength-3) + "...";
}
document.write(ret);
}
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!