html问题

Posted 2023-05-03

html问题如图，div宽度设置为100，在里面写内容（长度大于100），写的内容为符号（，.。之类的）就会跑到div框外边，而写的汉字的话就会在框内撑开div的高度。怎么回事呢？求大神指点。

原因：浏览器在解析我们页面的时候，给这一串当成一个单词了，这样就不会自动切断字符串而进行换行。

方法：用word-wrap:break-word和word-break:break-all ；
word-wrap:break-word; 和 word-break:break-all 的区别
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

word-break;break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
WORD-WRAP:break-word 支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。 参考技术A 这是因为div固定宽高之后他就是一个有实体的盒子，你往实体盒子加东西多了肯定会超出，当盒子div没有固定宽高的时候，那么内容就会撑大盒子，所以你想要在你的固定宽高写东西，可以使用</br>换行，或者写文章样式希望能帮到你

html页面对齐问题

【中文标题】html页面对齐问题

【英文标题】：html page alignment issue

【发布时间】：2009-12-21 16:28:03

【问题描述】：

我正在 Windows 平台上开发一个 html 页面。我发现当浏览器（显示）的分辨率（或大小，以像素为单位）大于页面大小时，页面将对齐到浏览器的左侧，我想将页面对齐到中心（中间）页面大小小于浏览器时的浏览器。

任何想法如何实现这一点以及如何找到左对齐的根本原因？ html页面很大，不方便在这里粘贴html代码。

提前致谢， 乔治

【参考方案1】：

首先，您需要将页面内容包装在一个块中（该块将居中）：

<div id="body">
    <!-- your page content here -->
</div>

然后您需要将其设置为居中。由于 Firefox 和 IE 处理块居中的方式略有不同，您必须做两件事才能使块居中。

1。将 body 设置为所有内容居中（对于 IE）：

body 
    text-align: center;

2。将内部块的左右边距设置为“自动”；和

3。由于居中文本会继承其子节点，因此您希望将其设置回左对齐（除非您确实希望所有文本都居中......等等！）：

#body 
    margin: 0px auto;
    text-align: left;
    width: 800px; /* set this width to how wide you want your content to be */

【参考方案2】：

任何想法如何实现这个和

http://dorward.me.uk/www/centre/

如何找到左对齐的根本原因？

...因为这是默认设置。

【讨论】：

我发现 IE 和 Firefox 有同样的问题，你的意思是 IE 和 Firefox 都保留默认对齐方式？

在您推荐的文档中，它提到了如何使其以特定元素为中心，例如

您将所有内容包装在一个元素（例如 div）中并将其居中。

【参考方案3】：

<style>
body

    width:800px;
    margin:auto;

</style>

【讨论】：

我没有在您的代码 sn-p 中找到任何处理对齐的代码？

在 CSS 中，将元素的左右边距设置为“自动”会导致该元素在其包含块内居中。

谢谢！我的 html 页面包含很多母版页（遗留代码），我不想过多地触及它们。您能否向我推荐一种安全有效的方法来使页面居中对齐，而无需触摸这些母版页？ :-)

某些版本的 Internet Explorer（7 和更低的 IIRC）不允许您在 body 元素上设置宽度。

【参考方案4】：

您只需在正文中添加 text-align: center; 即可覆盖旧版浏览器并添加：

text-align: left;
margin: 0 auto;

到您的第一个容器 div ...这将在所有浏览器中水平居中，无论多旧。

【讨论】：

为什么我需要同时添加 text-align: center;和文本对齐：左;？

文本对齐：居中； on body 是将页面上的所有内容居中对齐...因此，您需要在容器 div 中覆盖它，以便保留图像/正文副本等的默认位置，因为它会很自然。

1.您的意思是将“text-align：center”添加到body元素并添加“text-align：left;”到其他div？ 2. 我的 html 页面包含很多母版页（遗留代码），我不想过多地接触它们。您能否向我推荐一种安全有效的方法来使页面居中对齐，而无需触摸这些母版页？ :-)

是的，这就是我的意思......没有其他方法......这就是对齐页面的方式。对不起。