CSS: white-space: nowrap, похоже, не работает в IE
Вот jsfiddle
приведенного ниже кода. http://jsfiddle.net/ux4DD/2/. Я хочу, чтобы имя Harry Pham
было в одной строке, поэтому я делаю ширину очень маленькой и делаю white-space:nowrap
. Он работает в Firefox, но не в IE. Помогите пожалуйста
НИЖЕ ОТВЕТ. ПОЖАЛУЙСТА, СМОТРИТЕ JSFIDDLE ВЫШЕ, ЧТОБЫ УВИДЕТЬ, КАК ЭТО СМОТРЕТЬ
<html>
<head>
<style type="text/css">
.linkColor{
white-space: nowrap;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 450px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:20px;border-top:1px solid gray;">
<span class="linkColor">Harry Pham</span>
</td>
<td style="height:15px;background:url('images/line.png') no-repeat;width:28px;" width="35px"></td>
<td style="border-bottom:1px solid gray;" width="auto"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Ответы
Ответ 1
Для IE 6 и 7 вам необходимо обернуть текст тегом <span>
и присвоить ему свойство white-space
. Поскольку у вас уже есть тег <span>
, обернутый вокруг вашего текста, и у вас есть класс для него, просто добавьте свойство white-space
в класс <span>
.linkColor
.
.linkColor{
white-space:nowrap;
}
Ответ 2
Надеюсь, что это будет полезно:
var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
var button = buttons[j];
var textNode = button;
while(textNode.children[0]) {
textNode = textNode.children[0];
}
var text, words, numSplits;
var spacing = 0;
while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
button.scrollWidth > button.clientWidth) {
if(!spacing) {
text = textNode.innerHTML;
words = text.split(' ');
numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
spacing = Math.round((words.length)/numSplits);
}
for(var i = spacing; i < words.length; i+=spacing+1) {
words.splice(i , 0, '<br />');
}
textNode.innerHTML = words.join(' ');
spacing--;
words = text.split(' ');
}
}
Ссылка: Перенос слов для кнопки с указанной шириной в ie7?