Common solutions to problems caused by long string display

Today, tester Xiao Huang submitted a web interface bug and the layout changed. Debugging in FF finds that the long string variable $ {name} is broken through the div.

At the time of writing, most of the $ {name} values found are very small, so no preventive measures are taken. This hidden danger finally broke out today.

Solution:

1. Background string truncation. (Programmers know)

2. Solve the input tag. The disadvantage of this method is that there is no problem with the first display in the background, but it is difficult to see the white spot after the mouse is accessed!

<Input type = "text" size = 18 readonly style = "background-color: transparent; Border: Medium none; cursor: hand;" value = "$ {name}">

3. js solution. The functions provided by the jquery framework are easy to solve. Similar to background string truncation. The disadvantage is that if the content is

The URL or email will destroy the content structure.

4. Div + span: My personal recommendation for what I found today.

<Div style = "overflow: hidden; width: 200px" Title = "$ {name}"> <span >$ {name} </span> </div>

Using Div alone does not work for a long character in adjusting CSS width: 200px; overflow: hidden; Word-wrap: Break-word; Word-break: normal.

Considering that there are many such risks in the project, each of which is changed and the workload is heavy, a JS is written to solve the problem.

/* Auto hidden while text content length is over long */
$ (". Longtitle"). Each (function (){
$ (This). Wrap ("<Div Title = '" + this. innerhtml. Trim () + "'class = 'longtitle'> </div> ");
});

In this way, you can add a longtitle class to the required tag. <Note: The added tag can be <A> <span> if the text is directly placed under <TD>, change the wrapinner () function. For details, refer to the jquery framework>

 

This is Google's Gmail solution. The code is clean. Strong versatility. IE6, 7, ff2, and 3 are normal. No efficiency problems!