How to use CSS to define a form to wrap, to avoid distortion

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags change content document error find how to how to use no way

This morning the same meeting, pointed out the error of my page, the layer was stretched
It was still more depressing, because I tested it in Chinese, no problem.
They let me change English, finished, unrecognizable, I speechless
Change, no way ah, technology not home AH ~555~~
Above pure grumble, we can save, find the solution, record, easy to find later
=====================================================

Style= "table-layout:fixed; Word-break:break-all; Word-wrap:break-word "

Syntax:
Word-break:normal & #124; Break-all & #124; Keep-all

Parameters:
Normal: Allows wrapping within words according to the Asian and non-Asian text rules
Break-all: This behavior is the same as normal for Asian languages. Also allows any word in a non-Asian text line to be disconnected. This value is appropriate for Asian text that contains non-Asian text
Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word is not allowed to break. Non-Asian text for small amounts of Asian text

Syntax:
Word-wrap:normal & #124; Break-word

Parameters:
Normal: Allow content to top open specified container boundary
Break-word: Content wraps within boundaries. If necessary, the word wrapping (Word-break) also occurs.

Description:
Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container.

Syntax:
Table-layout:auto & #124; Fixed

Parameters:
Auto: Default automatic algorithm. The layout will be based on the contents of each cell. The table is displayed after each cell is read and calculated. The speed is very slow
Fixed: An algorithm for fixing the layout. In this algorithm, the horizontal layout is based solely on the width of the table, the width of the table border, the cell spacing, the column width, and the table contents.

Description:
Sets or retrieves the layout algorithm for the table.
-------------------------------------------------
Above can only solve the problem of IE, here FF we use JS insertion method to solve


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" ">
<meta http-equiv= "Content-type" content= "HTML; charset=gb2312 "/>
<style type= "Text/css" >
<!--
div {
width:300px;
Word-wrap:break-word;
border:1px solid red;
}
-->
</style>


<div id= "FF" > Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script type= "Text/javascript"
/* <![ cdata[*/
Function Tobreakword (intlen) {
var Obj=document.getelementbyid ("FF");
var strcontent= obj.innerhtml; 
var strtemp= "";
while (Strcontent.length>intlen) {
Strtemp+=strcontent.substr (0), Intlen) +

Strcontent=strcontent.substr (intlen,strcontent.length); 
}
strtemp+= "
" +strcontent;
Obj.innerhtml=strtemp;
}
if (document.getelementbyid   &&  !document.all)    Tobreakword (37)
/*] > */
</script>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.