允许 SPAN 溢出其包含的 DIV答案

【问题标题】：Allow a SPAN to overflow its containing DIV允许 SPAN 溢出其包含的 DIV
【发布时间】：2012-08-04 06:43:06
【问题描述】：

我正在尝试使用以下代码在图像上放置一个示例水印（并旋转它），但是当文本大小过大或过长时，文字会换行并创建两行。如果我禁用空格换行：nowrap，如果跨度变得太大，文本现在将围绕不同的点旋转。

<div class="customize-preview">
    <img src="{{ sample_image }}" id="sample-image" class="customize-image" />
    <div class="customize-overlay">
        <div style="display: table;" class="customize-overlay">
            <div style="display: table-row;">
                <div style="display: table-cell;" class="customize-watermark" id="watermark">
                    <span>Sample Watermark</span>
                </div>
            </div>
        </div>
    </div>
</div>

css是

.customize-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.customize-watermark {
    vertical-align: middle;
    text-align: center;
    background-color:transparent;
}

用户可以更改示例水印文本，但如果它变得太长或太大，文字将开始换行。如果我输入一个非常长的单词，它将扩展包含的 div，如果我尝试旋转该文本，则枢轴点将不再正确。另外，我希望它只是隐藏溢出的文本，这样就不会发生。

我在这里创建了一个演示：http://jsfiddle.net/yu9Mu/

您可以看到它换成了两行，但我希望它保持在一行并溢出。另外，如果我加上 white-space: nowrap，单词不会换行，但跨度会不断扩大。然后，如果我尝试运行 -webkit-transform: rotate(90deg)，它现在似乎正在围绕不同的点旋转。

提前致谢！

【问题讨论】：

标签： jquery css html twitter-bootstrap

【解决方案1】：

如果我能很好地回答你的问题，我认为你只需要设置好的空白

.customize-watermark {
    vertical-align: middle;
    text-align: center;
    background-color:transparent;
    white-space: nowrap;
}

See on this fiddle

【讨论】：

问题是，现在跨度没有居中，所以如果你添加一个旋转元素，它现在围绕不同的点旋转。 jsfiddle.net/S3A8W/1
你可能需要设置 margin-left = -(width / 2) px;与 JS。我让您快速搜索以了解如何操作。 :)
没有jquery有什么办法吗？

【解决方案2】：

http://jsfiddle.net/demchak_alex/yu9Mu/3/

添加

 white-space: nowrap;

到水印

【讨论】：