- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 div,其中经常显示一个没有空格的大字符串。
我希望文本环绕 div,如下所示:
我正在努力让它像左图那样工作。
在 Firefox 上(使用 v. 33.0 测试),大部分时间文本显示在左侧。 但是,有时(随机?)它显示在右侧。
我唯一要做的就是刷新页面 - 我会说每 10 次中就有 1 次文本显示不正确。在我看来,Firefox 对分词符的支持并不一致?
这是我的 CSS 代码。该字符串显示在列表中:
#my_div
{
letter-spacing: 1px;
font-size: 75%;
width: 10%;
min-height: 400px;
margin-left: 2%;
margin-bottom: 0px;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20px;
padding-top: 20px;
background-color: #44EEFF;
color: #000000;
float: left;
border: 1px solid #FF0000;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
text-align: left;
display: block;
}
是否有跨浏览器或特定于 Firefox 的方法将大字符串(没有空格)包装在 div 中?
更新:
我的 CSS 文件和网页的源代码都很大,我无法将其全部粘贴到此处。我会尽量把相关代码放在这里,只替换内容。
#my_div 中的文本位于无序列表 (ul) 中。
my_div 在容器 div 中。
在此容器内,#my_div 是三个 div 之一。
三个 div 应该并排放置(#my_div 是最右边的 div),因此这三个 div 都是 float:left 和 fixed width。宽度应为 20% (#left_div)、60% (#center_div)、10% (#my_div)。我在中间留了一点空间作为边距。
这是完整的 CSS 代码:
#my_div
{
letter-spacing: 1px;
font-size: 75%;
width: 10%;
min-height: 400px;
margin-left: 2%;
margin-bottom: 0px;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20px;
padding-top: 20px;
background-color: #44EEFF;
color: #000000;
float: left;
border: 1px solid #FF0000;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
text-align: left;
display: block;
}
#my_div ul, #my_div ul li
{
padding: 1%;
margin: 10px;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
}
#my_div_container
{
letter-spacing: 1px;
text-align: left;
margin: 0 auto;
background-color: #666666;
display: block;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
text-align: left;
display: block;
overflow: auto;
}
#left_div
{
letter-spacing: 1px;
text-align: left;
width: 20%;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #AAEEFF;
float: left;
display: block;
/*word-break: break-all;
word-wrap: break-word;*/
}
#center_div
{
background-color: #AAEEFF;
border: 1px solid #FF0000;
color: #FFFFFF;
font-size: 100%;
width: 60%;
margin-left: 2%;
margin-bottom: 5px;
padding-left: 1%;
padding-right: 1%;
min-height: 70vh;
display: block;
float: left;
}
#left_div_inner_div
{
color: #000000;
background-color: #AAEEFF;
font-size: 100%;
width: 100%;
left: 20px;
top: 90px;
border: 1px solid #FF0000;
padding-top: 5px;
padding-bottom: 10px;
}
#left_div_inner_div_horizontal_div
{
padding: 0;
margin: 0;
border: 0;
}
#left_div_inner_div_horizontal_div a
{
padding-left: 25px;
text-indent: 0px;
/*text-indent: 20px;*/
display: inline-block;
}
.page_background
{
font-family: Arial;
background-color: #000000;
/*width: 100%;*/
margin: 0px;
padding: 0px;
border: 0px;
min-height: 100%;
}
#my_content
{
background-color: #000000;
width: 100%;
display: block;
overflow: auto;
border: 0;
padding: 0;
margin: 0 auto;
text-align: center;
}
#my_wrapper
{
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
background-color: #000000;
}
这是页面的 HTML 代码:
<!DOCTYPE html>
<html>
<body class='page_background'>
<div id='my_wrapper'>
<div id='my_content'>
<div id='my_div_container'>
<div id='left_div'>
<div id='left_div_inner_div'>
<div id='left_div_inner_div_horizontal_div'>
<a href='http://stackoverflow.com'>Stack Overflow</a>
</div>
<div id='left_div_inner_div_horizontal_div'>
<a href='http://www.google.com'>Google</a>
</div>
</div>
</div>
<div id='center_div'>
<p>Center area</p>
</div>
<div id='my_div'>
<table>
<tr><td>
<ul>
<li>
large_string_inside_my_div_is_not_working_consistently_in_firefox
</li>
</ul>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
我正在尝试使用 Guilherme 的 fiddle 重现错误。
最佳答案
这就是你使用 <table>
的原因到“布局”,<table>
应该用于tabular-data (语义)
Note: word-break and hyphens are inherit
<style>
#my_div {
letter-spacing: 1px;
font-size: 75%;
width: 10%;
min-height: 400px;
margin-left: 2%;
margin-bottom: 0px;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20px;
padding-top: 20px;
background-color: #44EEFF;
color: #000000;
border: 1px solid #FF0000;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
text-align: left;
display: block;
}
#my_div ul, #my_div ul li {
padding: 0;
margin: 10px;
}
</style>
<div id="my_div">
<table>
<tr>
<td>
<ul>
<li>
large_string_inside_my_div_is_not_working_consistently_in_firefox
</li>
</ul>
</td>
</tr>
</table>
</div>
在线示例:http://jsfiddle.net/f5shbhsx/10/
<style>
#my_div {
letter-spacing: 1px;
font-size: 75%;
width: 10%;
min-height: 400px;
margin-left: 2%;
margin-bottom: 0px;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 20px;
padding-top: 20px;
background-color: #44EEFF;
color: #000000;
border: 1px solid #FF0000;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
text-align: left;
display: block;
}
#my_div ul, #my_div ul li {
padding: 0;
margin: 10px;
}
</style>
<div id='my_div'>
<ul>
<li>
large_string_inside_my_div_is_not_working_consistently_in_firefox
</li>
</ul>
</div>
在线示例:http://jsfiddle.net/f5shbhsx/11/
表格是布局的语义错误标记,更喜欢使用“语义”,请参阅:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
阅读表格数据: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Tabular_data
更多?谷歌:https://www.google.com.br/search?q=html+semantic+layout
关于css - Firefox - CSS 断字 : break-all unstable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26475640/
安装并修复我的 VS2015 实例后,我仍然无法让智能感知(服务器端)在我的 MVC View 中工作。当我在 session 中第一次打开 .cshtml 文件并找到 Activitylog 文件时
我是一名优秀的程序员,十分优秀!