The request is here
In a certain period of product iteration, a small function was added, that is: the text content in the cell needs to be truncated when the characters exceed 20 characters , And display 20 characters + an ellipsis, if it is not exceeded, ignore it.
This requirement does not look very complicated, it seems that it can be done with css (writing css and writing magic, I want to move closer to this), then search first, the word is not finished, just There is a prompt “css limits the number of characters displayed, and the excess text length is indicated by an ellipsis”, oh my c, isn’t it simple?
accept Challenge
So in accordance with other people’s solutions, the following content was added to the cell style:
/* td’s superior and sibling tags are all represented by element */element element>td {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
| Name | Hobbies | Personal introduction |
|---|---|---|
| Gentleman | Music | I am a gentleman, the so-called slender lady, what I want, how about a girl, can I add a WeChat? |
| greed | count money< /td> | I am the greed among the seven deadly sins, but it seems that I’m a little bit wrong, because greed shouldn’t be just for money, right? |
You can try it on this form, but since this is a form generated by markdown, some styles need to be changed by yourself. The picture below I just found a table change style in w3cSchool.
Get the job done, look at the results and prepare to pack things and go home…
However, the height of this cell is wrong, and the content displayed is wrong.
I was lost in thought…
So the following items were added or decreased in the console of the browser: text-overflow, overflow, width, height, max-xxx, padding, margin…
But I found something wrong Use, fall into contemplation again.
At this time, I looked back at the contents of those blog records and found that all the p tags were used, and no other tags were used. After thinking about it, maybe this is the problem? So I changed it to the p tag, and then added the above code (and a margin:0), and found that the display was indeed successfully truncated and displayed the content.
Note here, if What is added in td is a div tag, so the expected result cannot be displayed. If you add an attribute to it
white-space: nowrap;to eliminate line breaks and display in a single line, then character truncation can also be achieved .
But at this time another problem was discovered. The length of the truncation seems to be difficult to control. If it is only Chinese characters, then you can use width: 20em or width: 10em (displayed on two lines), but obviously, this attribute is not available when using English.
So I changed my mind.
In the following, we will discuss this issue with the angular frame as an example
When the number of text characters>=20, it will be truncated and displayed, right? Where did this text come from?
Responsive, there must be data binding. How do you change the text written directly in the label? Take a look…No, this is not a DOM operation. It can be done with native js or jQuery, but I am not sure what this means. Maybe it will be useful when not using the framework.
| {{ label }} | {{ item | clip }} |
|---|
@Pipe({'name' :'clip'})export class clipPipe implements PipeTransform {transform(val: string) {if (val> 20) return val.slice(0, 20) +'...'; return val; })
Through the pipeline method, we can directly output the truncated data. Of course, there are other methods, but I did not think of other better methods.
If you have a good method, you can leave a comment, I will try it, hey
Summary
Sometimes when we think about problems, we get stuck in a horn of Solved in a certain direction.
At this time, you can put the problem aside first, look at the scenery outside the window, or hang out in a daze, calm down, and then think about whether there are other ways to solve the problem I have.
Divergence thinking.