我目前正在构建一个电子邮件模板。该模板包含彼此相邻排列的 USP。这是我正在使用的代码：

使用“nowrap”，我试图在智能手机上将 USP 放在彼此下方。太糟糕了，USP 都站在一起，这让桌子更宽了。

是否有一个简单的内联 CSS 技巧可以让它们在小屏幕上相互站立？

最近更新的Chrome 中断white-space: nowrap使用元素。如何在不在类上添加硬编码宽度的情况下解决这个问题..text-overflow: ellipsis;overflow: hiddenname

结构不应该改变，因为我.name在我的应用程序的其他地方重用了该部分。

http://codepen.io/anon/pen/xZpMYg

如何在 Mozilla Firefox 中防止 URL 中的换行符。使用 CSS white-space: nowrap; ? 还有其他解决方案吗？谢谢。

http://codepen.io/anon/pen/VeNJKW

我有一个inline-flex容器，里面有两个必须展开（不换行）的内部块。

在第二个块中，有另一个inline-flex容器，其中包含两个不能包装其内容的内部inline-blocks 。

我需要的

是显示text-overflow: ellipsis最顶部容器 ( div.width) 的宽度不足以将所有内部块显示为 时white-space: nowrap。

的内容div.width 不能溢出它的容器，以防a链接的内容太长。

片段

笔记

• 当前的块都不能指定特定的固定宽度！
• 按钮必须始终保持可见（省略号最终应应用于a链接元素）。

我想将文本放置在 div 中，以便文本行保持在同一行并且不会换行。

我尝试的是nwrp通过添加一些示例文本来将属性添加到 div，但如下面的屏幕截图所示，文本换成了多行：

有谁知道如何指定 div 文本定位以保持在同一行？

此 div 包含在 Repeater 控件中，如下所示：

我正在尝试设置一个包含三列的 flexbox 布局。左右列具有固定宽度。中心列具有可变宽度以填充可用空间，但它包含一个长文本，不应将其换行并使用省略号。

不幸的是，非换行文本不能让列占用可用空间并将整个布局推到父元素的边界之外。

小提琴链接：http: //jsfiddle.net/2Lp8d80n/

任何帮助表示赞赏。

我有一个div里面有一些内容，并设置为white-space: nowrap;当这种情况发生时div保持相同的大小。我怎样才能使它div继续包裹到现在漂浮在页面右侧的内容的末尾？

我有一个我设置的最大宽度和黄色背景的 div。在那个 div 中，我放置了两组单选按钮（每组 5 个按钮），每组都有一个关联的标签。

我不希望集合在单选按钮之间或关联文本和单选按钮之间分成两行。所以我在每个集合的范围内使用“空白：nowrap”。另一方面，如果有两个很长的集合，一个接一个，我希望第二个集合自动转到下一行。

我看到的很有趣。我有一个黄色背景的 div 居中在我的屏幕上，但两个单选按钮集在同一行。最右边的单选按钮集从黄色区域开始，但延伸超过它，进入背景。我做了一个 jsfiddle 来演示，它位于： https ://jsfiddle.net/03jLe0x1/ 代码也如下：

当我有ellipsis长词时，它会中断id:并[ ]进入不同的行。我似乎无法将它们一行一行地放在一起。我试过white-space: nowrap和display: inline-block。有任何想法吗？

https://jsfiddle.net/b35m449x/4/

HTML

CSS

似乎将“连字符”设置为“自动”现在比“空白：nowrap”具有更高的优先级。在以前版本的 Chrome（Mac 中的 54 之前）和其他浏览器（FF、Safari、IE）中，似乎“空白：nowrap”的出价高于连字符。因此，如果您指定 white-space: nowrap 和 text-overflow: ellipsis，您会看到无论连字符设置如何，文本都会被省略号截断。

从 55.0.2883.95（Mac 版）开始，似乎连字符：auto 即使指定了 white-space: nowrap 也会进行换行。我同意同时指定连字符和 nowrap 听起来很愚蠢。但由于这是一种“新”行为，我想确认这是一个错误还是预期的行为。

我创建了一个简单的小提琴来测试这个问题，以比较其他浏览器的行为。

截图：

Mac 55.0.2883.95（64 位）中的 Chrome