Summary of css hidden text

Sometimes, we use images instead of text. The most commonly used is the input button.
In the past, I used text-indent:-9999px to move the text out of the page. However, this method has a "bug" in IE6. After applying this css attribute to a block element, the content of this block will also disappear. In this case, you need to set this block content as a block element (display: block ;).
Recently, I used to remove text from some elements with fixed length and width using line-height: 999em, but at this time I need to add an overflow: hidden for truncation to this element, otherwise, the block will be pulled very high by line-height: 999em.

I didn't pay attention to this method. I thought this would not cause any problems, but today I was surprised to find that if the input value is displayed normally in Firefox when it is used in the input button, it is not affected by line-height: 999em. IE6 and Google Chrome are normal.

At this time, if the backend needs to store a value for the value of this button, this method cannot be used. Only text-indent can be used. However, this element is not a block element at this time, what should I do if I don't want to modify the layout and convert it into block elements? You can only use this text-indent:-9999px; then specify a separate _ line-height: 999em for IE6. Although very ?? Close ?? Warehouse drought? /P>

CSS Hide Unnecessary text

(2)
Line-height: 0;
Font-size: 0;
Overflow: hidden;

Can "hide" the font above your background perfectly
Ie6.0, 7.0, 8.0, and firefox 3.010 passed the test.

(3)
The most convenient thing is to add a span and then display: none, without any bugs.
Unfortunately, when multiple tags are added and used in a loop, a bunch of bytes are added to html. We recommend that you use a single button.

However, it is difficult to hide the input value.
So we can only use block and text-indent to "offset" to simulate hiding.
Display: block;
Font-size: 0;
Line-height: 0;
Text-indent:-9999px;
Ie6.0, 7.0, and firefox 3.010 passed the test.

(4)

CSS? Extra text ??..

Class = "g_p_center g_t_right g_c_pdin g_h_20 c08" style = "margin-bottom: 15px"> class = "g_p_left" >>< div style = "width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid red "> try hi.baidu.com/commy. for more information, see hi.baidu.com/commy, </div> class = "g_blog_list"> class = "g_t_center g_c_pdin g_p_center c07 content"> class = "ns_content">

 

Syntax:
Text-overflow: clip | ellipsis

Parameters:
Clip: do not show the omitted mark (...), but simply crop
(Clip is not commonly used !)
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)

Note:
Sets or retrieves whether an omission mark (...) is used to indicate text overflow in the object.
Note that the text-overflow: ellipsis attribute has no effect in FF.

Example:
Div {text-overflow: clip ;}