2013-08-27 3 views
2

У меня есть три столбца в строке и третий столбец с длинным текстом без пробела. Из-за длинного текста я не могу обернуть текст внутри столбца и получить горизонтальную полосу прокрутки на странице. Есть ли способ добавить пространство после специального символа тильды ~ через css? Я не могу добавить пробел через код, поскольку он генерирует через базу данных.Длинный текст без пространственной упаковки внутри столбца

форматирования текста ниже: Афганистан ~ Албания ~ Алжир ~ Андорра ~ Ангола ~ Антигуа ~ Барбуда ~ Аргентина ~ Армения ~ Австралия ~ Австрия ~ Азербайджан ~ Багамы ~ Бахрейн ~ Бангладеш ~ Барбадос ~ Беларусь ~ Бельгия ~

Вот пример: http://jsfiddle.net/awaises/nupqS/1/

table{width:100%;} 
td{ 
    vertical-align:top; 
    font:normal 9pt arial; 
    padding:10px; 
    width:33%; 
    word-wrap: break-word; 
    } 

ответ

1

демо:http://jsfiddle.net/nupqS/2/

использование макс ширина CSS только

td { 
vertical-align: top; 
font: normal 9pt arial; 
padding: 10px; 
width: 33%; 
max-width: 200px; 
word-wrap: break-word; 
} 

и если вы хотите, чтобы удалить ~ вы можете использовать JQuery как этот

демо:http://jsfiddle.net/nupqS/5/

использование макси- ширина css, jQuery и пустое пространство

var textarea = $("td.td3"); 
textarea.html(textarea.html().replace(new RegExp("~","g")," ")); 

* использование макс ширина CSS, JQuery и breack *

демо:http://jsfiddle.net/nupqS/6/

+0

Спасибо, чувак, но вместо пикселя мы не можем добавить процент? Эта таблица должна быть заполнена. –

+0

уверен, что вы можете добавить что захотите даже em http://pxtoem.com/ –

+0

Я попытался добавить max-width: 33%; но, к сожалению, он не работает. Можете ли вы проверить? –

0

Вы не можете использовать CSS, чтобы добавить символ после каждого вхождения определенного символа. Однако вы можете сделать это с помощью JavaScript. Предполагая для простоты, что соответствующие клетки могут быть признана классом t3 и только этот класс присваиваются им, вы можете добавить U + 200B ZERO WIDTH пространства после каждого вхождения тильды следующим образом:

<script> 
var t = document.getElementsByTagName('td'); 
for(var i=0; i < t.length; i++) 
    if(t[i].className === 'td3') 
    t[i].innerHTML = t[i].innerHTML.replace(/~/g, '~\u200b'); 
</script> 

Вы должны удалите word-wrap: break-word, так как это буквально для разрыва слов, и вы не хотите, чтобы слова были абсурдны в ab rutal wa y.