Maison > interface Web > tutoriel HTML > css一个奇怪的小问题_html/css_WEB-ITnose

css一个奇怪的小问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:49:05
original
1286 Les gens l'ont consulté

我在做一个三列布局,简单要求整体居中,然后左右两列固定宽度,中间一列自适应。
然后我的代码是这个

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>三列布局</title>	<style type="text/css">		body{ margin:0; padding:0;}		.con{width: 800px;margin: 0 auto;background-color: #ccc;position: relative;color: #000}		.left{border:1px solid #333;padding:10px;width: 200px;height: 500px;background-color: transparent;position: absolute;left: 0;top: 0}		.center{border:1px solid #333;padding:10px;background-color: transparent;height: 500px;margin: 0 325px 0 225px;}		.right{border:1px solid #333;padding:10px;width: 300px;height: 500px;background-color: transparent;position: absolute;right: 0; top: 0;}	</style></head><body>	<div class="con">		<div class="left"></div>		<div class="center"></div>		<div class="right"></div>	</div></body></html>
Copier après la connexion

现在看起来没有问题。在.lfet  .center  .right中添加文字都没有什么问题,显示都很正常有自动换行,也没有撑开.center的宽度;但是在它们里面添加“ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss”的时候问题就来了,不会自动换行啊。虽然宽度没有被撑开,但是内容跑出去啦。 这是怎么一回事啊。。十分不解,为什么里面是正常的内容就会自动换行,一串字符串就GG了呢。 网页有智能了吗!! 啊 细思极恐啊


回复讨论(解决方案)

你放进去的是非正常的字符串,浏览器不知道你会在什么地方换行,所以就不换行了

你放进去的是非正常的字符串,浏览器不知道你会在什么地方换行,所以就不换行了


可以这样理解不,如果我放进去的是“sssssssssssssssssssssssssss”(本意是想放字符letter) 因为没有空格,所以浏览器默认以为是一个单词(word)所以浏览器选择显示完这个word。就跟leeter-spacing和word-spacing感觉一样

是的,换行应在单词分界出
把单词切断的话,应在切断出加连字符
由于各语种的切词规则不尽相同,所以浏览器不能做处理。但专业的排版软件都可以做到

 .center{
         word-break: break-all;
        }

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal