javascript - 如何将长文本保持在一行而不将其扩展到 css 中的超过 1 行

Question

我有一个 span 元素，它被支持只在其中保留文本。文本是动态生成的，所以我不知道文本部分的宽度有多长。最主要的是，如果文本宽度长于跨度宽度，我想将文本保留在同一行(不少)。

换句话说:如果我的 span 宽度为:500，我怎样才能使我到目前为止在问题中写的整个文本(对于一个 examlpe)适合它并以某种方式旋转或其他什么？我只想始终在同一条线上，而不是在 2 或 3 条线上，这样它就可以适应容器的宽度。也许我必须缩小它或其他东西。希望你明白了!

Answer 1

如果您使用 whitespace 和 overflow CSS 属性，则只有 CSS 和 HTML 才有可能。

这是一个例子:

CSS:

.my {
    width: 120px;
    overflow: auto;
}

.my2 {
    white-space:nowrap;
}

HTML:

<div class="my">
    <div class="my2">
    </div>
    <p>asdf</p>
    <p>asdf</p>
    <p>asdf</p>
</div>

JS 填充 my2 div:

var text = [];
for(var i = 0; i < 100; i++) {
    text.push('asdf');
}

$('.my2').text(text.join(' '));

检查 fiddle :http://jsfiddle.net/7vJXK/

对于滚动文本尝试选取框:http://jsfiddle.net/7vJXK/1/

虽然我只在 Chrome 中测试过它。