个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我被迫做一些与 IE8 兼容的开发。
从这段代码开始，我们看到随着窗口缩小，表格以一种将文本与其单选按钮分开的方式包裹文本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<table style="border-collapse:collapse; border:1px solid black"><tr>
<td style="border-collapse:collapse; border:1px solid black">
Foo
</td>
<td style="border-collapse:collapse; border:1px solid black">
<label style="white-space:normal"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="white-space:normal"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="white-space:normal"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
</td>
</tr></table>
</body></html>
因此，将第 3 个元素的 white-space 样式更改为 nowrap 似乎可以解决问题。现在它将强制单选按钮和所有文本换行。
<td style="border-collapse:collapse; border:1px solid black">
<label style="white-space:normal"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="white-space:normal"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="white-space:nowrap"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
</td>
但是，如果进一步缩小窗口，问题仍然存在于其他元素上，因此我们也将前两个元素更改为 nowrap:
<td style="border-collapse:collapse; border:1px solid black">
<label style="white-space:nowrap"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="white-space:nowrap"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="white-space:nowrap"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
</td>
现在整个表格单元格不再换行!
它在 Firefox 中正常工作，但在 IE8 中不正常。有任何想法吗？谢谢!
最佳答案
您可以使用float 来解决这个问题:
<td style="border-collapse:collapse; border:1px solid black;">
<label style="float:left;"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="float:left;"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
<label style="float:left;"><input type="radio" />
Bar Bar Bar Bar Bar Bar Bar
</label>
</td>
查看此 working example !
这样就不会发生换行，如果窗口变得非常小，换行仍然有用。
关于html - 表格行中包含 "nowrap"的元素会阻止整行在 IE8 中换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10889601/
25
4
0
我现在是我的 div 的宽度，但我不知道我的 child button 和 ins 标签的高度。ins标签有nowrap。 我想用 ins 标签在一行中显示 button。 div { bor
我有一个 KnockoutJS 模板，它创建一个 input[type=text] 和一个 select 彼此相邻，没有 中间。然而，它在 white-space: nowrap; 之间设置了一个换行
所以我有这些 DIV，我已安排它们在父级内部向左向右滑动。 请参阅以下 JSFiddle 以查看设计: http://jsfiddle.net/StevP/C9WL7/ 您可以看到，通过将第一个子 D
在此图像中，最后一个框中有额外的空间，如红色箭头所示。如何解决？ 最后一个短语周围有 white-space: nowrap。 JSFiddle .outer { text-align: cent
我想制作一些带有分隔线的自定义标题。我将最大宽度文本设置为 40%，行分隔符显示在文本之后。主要想法是，如果文本少于 40%，则行从文本结束处开始，但如果文本大于 40%，则换行。 不幸的是，如果我不
我正在尝试构建一个切换开关，单击它可以添加或删除空格换行。 必须包裹的div不能有ID，所以需要通过它的类来识别。在本例中为“文本”。在整个页面上，该类仅使用一次。 我构建了这个，但它不起作用。我哪里
我正在尝试使用 CSS 进行以下设计: 想法是让它在全 Angular 容器中水平滚动。 我在包装器中添加了 white-space: nowrap，但由于文本太长，它会从容器中消失。这是问题的屏幕截
使用 nowrap 和列表项会出现一些奇怪的行为。如何让填充在 chrome 中正确应用于“Testing 123”li？ (测试 123 中的“3”超出了定义的宽度并侵占了填充)。 基本上我想要实现
不使用 table 可以将标签放在每个文本框上方吗？我的问题是当我尝试在“NoWrap”中放置“新行”时。 基本上我得到了一个数组的数组，有“名称”和“值”，值将由用户更改，所以第一组元素将并排显示，
我承认，当我不想让单词间断时(例如表格标题)，我有在单词之间使用 的习惯。 我真的应该使用 white-space:nowrap 来设置我的元素样式吗？如果我唯一想做的就是避免换行，这两者有什么优
如果我有几个输入( radio 或选项)后跟它们的标签，都在同一行。我是如何做到的，这样它就不会在 radio 后断线，而是在标签后如果需要断线。 First radio Second radio T
在这种情况下: Some Text 我想在必要时在我的文本上换行，但我不希望我的跨度换行，我希望它始终坚持文本的一部分。我该怎么做？ 谢谢， 最佳答案 我如何通过将一
有没有办法避免 div 的换行当内容不仅仅是文本时的内容，例如几个按钮？ 最佳答案 white-space:nowrap; 应该可以解决问题。 #foo { white-space:nowrap;
这是我的代码中不起作用的部分: .copyright { display: flex; flex-wrap: nowrap; /* This is not working */ col
我想让标题包含 Logo 和菜单。 我做了一行和两列。我使用了 Bootstrap 类。当我将窗口大小调整为较小时，菜单会在 Logo 下跳转(看我的图片)。在屏幕宽度较小且菜单在 Logo 下跳转的
我有大量表格数据，其中最左边的列需要始终显示，并且每一行只占一行 - 这可以通过 CSS 指令 white-space: nowrap 来实现>. 我选择了DataTables jQuery plug
我有一个应该内联显示的链接列表。问题是我不希望文本在链接中间换行。如果它需要换行，它应该只在 链接之间进行换行。 因此，我已将 white-space:nowrap; 属性添加到我的链接中。但是生成的
我有一个设置 word-wrap:break-word 的问题。结果让这个div显示了scroll-x。但问题是 blockquote 元素不再是 break-word 的样式，它正在向正确的方向堆叠
这是 JSFIDDLE我想要制作 img 标签:margin-right:1px;但是当我设置空白:nowrap;我不能那样做。我该怎么办？？ 最佳答案 试试这个 http://jsfiddle.ne
我正在使用内部有 ul 列表的自定义滚动条。当 ul 列表或 li 内容扩展时，滚动条也会扩展。 我在主 div 中使用了 white-space:nowrap 以便 ul 宽度得到扩展，但它仅在 c
我是一名优秀的程序员,十分优秀！