css - 如何在溢出的情况下不让文本换行

Question

我正在列一个列表，其中有些元素很短，有些元素很长。如果文本很长，我不想换行。我正在寻找一种方法，不让换行，只是减小字体大小，然后它可以放在一行中。像线宽之类的东西？!或者如果我不想在转到下一行时显示其余文本怎么办。因此，如果文本比一行大，它就放...而不在下一行显示其余部分。

这是我到目前为止所做的:

  .Music li .songName{
    background:url(img/play-button.png) no-repeat left center;
    background-size:40px;
    padding-left:45px;
    float:left;
    padding:5px;
    font-size:40px; 
    text-transform:uppercase;
    font-family: 'Raleway', sans-serif; 
    font-weight:300;
   }

有什么想法吗？

Answer 1

在普通的 css 中我认为这是不可能的，或者它不会跨浏览器兼容(尤其是 IE)。所以解决方案是使用 javascript/jQuery。我找到了这个插件 http://fittextjs.com/这可能会帮助您调整文本的大小(还没有尝试过)。
我正在考虑的其他解决方案是在 div/span 元素中添加文本并测量它和父 div 的宽度，并在页面加载时调整大小(类似于此处的讨论:http://css-tricks.com/forums/topic/is-it-possible-to-adapt-font-size-to-div-width/)我希望这有助于您的研究和解决您的问题 :) 这是主题中的示例(http://jbdes.net/dev/js/fontsize.html)。必须稍微修改一下

示例:if ($("span").width > $("div").width) 然后调整大小。