标签: nowrap

这是我的小问题(这里的值只是示例):

可以说我有一个宽度约为500px的窗口.在我的文档中,我有一个没有指定宽度的外部div,但是下面的css:

.outer{
  white-space:nowrap;
  background:blue;
}

在这个div里面是另外3个具有以下属性的div:

.t1{
  display:inline-block;
  width:400px;
}

(注意问题的宽度400px.这就是问题所在,线条宽于窗口,外部div不会延伸.HTML看起来像这样:

<div class="outer">
    <div class="t1">1</div>
    <div class="t1">2</div>
    <div class="t1">3</div>
</div>

我想要实现的是让3个内部div具有蓝色背景,而不是为t1类设置它.这个例子将产生的是蓝色背景,仅限于窗口的宽度.

请参阅此处的完整示例:http://jsfiddle.net/sjCTR/(如果您的屏幕很大,则必须调整左下角)

我想知道是否可以通过css/html实现,不设置外部div宽度/内部div背景？

我承认, 当我不想让它们破坏时,我习惯在单词之间使用(例如表格标题).我真的应该用我的元素造型white-space:nowrap吗？如果我唯一要做的就是保持文字不被包装,是否有优点/缺点？

我有以下标记

<style type="text/css">
    #outer
    {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        width:100%;
        white-space:nowrap;
    }

    #inner
    {
        background-color:#CCCCCC;
        margin:0px 4px 0px 4px;
        padding:5px 5px 0px 5px;
        border:1px solid #9A9A9A;
        border-width:1px 1px 0px 1px;
    }

</style>

<div id="outer">
    <div id="inner">
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    </div>
</div>

当浏览器足够宽时,它看起来像这样

当浏览大小调整时,它看起来像这样

当我滚动时,我希望窄视图的灰色背景一直延伸到右边.那我的标记和CSS会导致这种不良影响(发生在Chrome,FF3和IE8中)

我无法让这个非常简单的jsfiddle工作.它只是在点击按钮时应该提醒测试.我在这里错过了什么？

http://jsfiddle.net/u9nG6/2/

http://jsfiddle.net/a2kvU/

<table class="table table-bordered table-condensed">
    <tbody>
        <tr><td class="nowrap">abc def ghi jkl<span class="label label-info pull-right">123</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc def ghi<span class="label label-info pull-right">456</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc def<span class="label label-info pull-right">789</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
        <tr><td class="nowrap">abc<span class="label label-info pull-right">1000</span></td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr>
    </tbody>
</table>

.nowrap {
    white-space: nowrap;
}

在大多数屏幕尺寸下，这看起来像

在较小的屏幕尺寸（并具有足够大的真实文本）下，这看起来像

请注意左列的包装。如何强制左列不换行？

我正在尝试设置一个包含三列的flexbox布局.左列和右列具有固定的宽度.中间列具有流体宽度以填充可用空间,但它包含一个长文本,不应该包装,而是使用省略号.

遗憾的是,非包装文本不能提供列占用可用空间的能力,并将整个布局推送到父元素的边界之外.

img {
    max-width: 100%;
}
#container {
    display: flex;
    max-width: 900px;
}
.column.left {
    width: 350px;
    flex: 0 0 350px;
}
.column.right {
    width: 350px;
    flex: 0 0 350px;
}
.column.center {
   // fluid width required
}

h1 {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

<div id="container">
  <div class="column left">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
  <div class="column center">
    <h1>
     This is long text. If overflow use ellipsis
    </h1>
  </div>
  <div class="column right">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
  </div>
</div>

链接到小提琴: …

是否可以在TextView中使用类似于WebView中的此功能的spannable？

Bob McDonalds <span style="white-space: nowrap">&lt;b.mcdonalds@domain.com&gt;</span>

我想避免

|Email: Bob McDonalds <b.          |
|mcdonalds@domain.com>             |

我宁愿

|Email: Bob McDonalds              |
|<b.mcdonalds@domain.com>          |

我有一个具有多个跨度的div。跨度包含无法分割成多行的文本，因此我设置了空白：nowrap。这确实会正确停止每个子跨度内的换行，但也会阻止父div换行子级，因此所有跨度都位于一行上，延伸到页面之外。

如何更改此行为，以便nowrap仅适用于每个跨度的内容？

我想为我拥有的按钮制作标签。我的问题是标签比按钮宽。我目前已经这样做了（简单的例子）：

<div class="parent_container_the_icon">
    <div class="label">
        This is the label text
    </div>
<div>

CSS：

.parent_container_the_icon {
    height: 50px;
    width: 50px;
    float: left;
}

.label {
    display: block;
    position: absolute;
    white-space: nowrap;
}

我想要的是标签在不包装文本的情况下采用标签文本本身的宽度。目前它没有包装文本，但我在标签框中看到文本溢出，因为该框仅占用容器的最大宽度。

如何强制标签div适合文本的大小而不继承父级的宽度？

我快疯了。我用搜索和谷歌，但无法提出解决方案，它不起作用:(

我在其他div中嵌套了一个div，用于自动垂直居中和背景。最初，它可以垂直容纳多张图像并动态调整其大小。我根据图片数量（宽度，填充）使用了几种CSS样式。

但是对于这个画廊来说，我需要很多图片，原始布局分为几行，但是我想要一个嵌套的“ white-space：nowrap”和overflow-x：auto; 在我的div中 因此，我可以滚动它们，但是“ white-space：nowrap”会炸毁整个内容，而会破坏所有display：table属性。

我想这应该发生吗？但是，接下来我需要一个解决方案或至少一种提示。

我还做了一个简化的提琴：http : //jsfiddle.net/x696B/9/ 如果删除了显示表属性，它将起作用并滚动。我的div需要这个。：D

这是我的nooby CSS（相关部分）

html
{
    height:100%;
}

body 
{
    height:98%;
    background-color: #FFF9E5;  
    padding: 0px;                               


  }    
.wrapper
{
        margin:auto;
        padding: 0px;
        z-index: 0;
        height:100%;
        width:100%;
        display:table;
    vertical-align:middle;
}

    .outer
    {
        z-index: 0;
        padding: 0px;
        display:table-cell;
        vertical-align:middle;
        background-color: #FFF9E5;
     }


div.container
{
        margin: 0           auto;
            display:table;
        z-index: 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width:60%;
        background-color: #867F27;
        padding-right:1%;
            padding-left:1%;
            white-space: nowrap;
            overflow: auto;
    } 

     .view
     {
        width:100%;
        white-space: nowrap;
        overflow-x: …