Чи є спосіб переписати довгі слова у дів?

173

Я знаю, що Internet Explorer має стиль перенесення слів, але я хотів би знати, чи існує спосіб перехресного перегляду веб-сторінок для тексту в діві.

Переважно, CSS, але фрагменти JavaScript також добре працюватимуть.

редагувати: Так, маючи на увазі довгі струни, вітайте людей!

css html word-wrap

— Резерфорд
джерело

7

Обгортання слів відбувається за замовчуванням. Ви маєте в виду , коли упаковка НЕ окремі слова?

— Квентін

313

Читаючи оригінальний коментар, Резерфорд шукає крос-браузерний спосіб загортання неперервного тексту (випливає з його використання перетворення слів для IE, призначених для розбиття нерозривних рядків).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Зараз я трохи використовував цей клас і працює як шарм. (зверніть увагу: я протестував лише у FireFox та IE)

— Аарон Беннетт
джерело

Стара публікація, але вона не відображає пробілів, коли IE знаходиться в режимі примх.

— Джеремі

2

Я використовую Firefox 24.6.0, і word-wrap: break-wordце те, що насправді працювало.

— користувач545424

3

Word-wrap: break-wordХоча створене Microsoft тепер є частиною стандарту CSS 3, і це те, що робить фокус :-)

— Pascal_dher

38

Більшість попередньої відповіді не працювали для мене у Firefox 38.0.5. Це зробило ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Документація:

— Пол Захра
джерело

2

Дякую! це єдина відповідь, що спрацювала (word-break: break-all; це те, що працювало на мене)

— DaniCE

14

white-space: pre-wrap

quirksmode.org/css/whitespace.html

— NVI
джерело

4

мертве посилання. Надайте більш детальну відповідь.

— JoshYates1980

12

Рішення Аарона Бенне для мене прекрасно працює, але мені довелося видалити цей рядок із його коду -> тому що white-space: -pre-wrap;він давав помилку, тому остаточний робочий код такий:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

дуже тобі дякую

— Гюго
джерело

1

Аарон Беннетт згадав цю саму відповідь за 2 роки до вас. те, що ви тут зробили, не додає значення.

— AaA

6

Привіт, як ви бачите, якщо ви читаєте обидві відповіді ще раз, що я говорю, це лише те, що рішення Аарона добре, але я отримував помилку в одному з написаних ним рядків, тому я просто змінив його на рішення, яке працювало на я. Можливо, мені слід було б прокоментувати його відповідь, я знаю це, вибачте і дякую

— Уго

Мені довелося додати це "white-space: -pre-wrap", і воно спрацювало :)

— Ravi Khambhati

0

Як згадує Дейвид, це роблять DIV обгортання слова за замовчуванням.

Якщо ви маєте на увазі дійсно довгі рядки тексту без пробілів, я лише обробляю рядок серверного рядка та вставляю порожні проміжки:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Це не точно, оскільки існують проблеми із розміром шрифту та подібними. Параметр "span" працює, якщо контейнер змінюється за розміром. Якщо це контейнер з фіксованою шириною, ви можете просто продовжити і вставити розриви рядків.

— DA.
джерело

@TomHert, що дійсно дивно. Хоча, ну, IE. Це ніколи не працює. Однак це було розміщено 5 років тому. CSS3 тепер має кілька кращих варіантів переносу слів, якими IE може вмістити developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

— DA.

Так, я знаю, мене просто вразила простота цього рішення, що мені довелося його спробувати :)

— Том Герт,

0

Ви можете спробувати вказати ширину для div, будь то в пікселях, відсотках чи емах, і в цей момент div залишиться такою шириною, і текст автоматично загортатиметься в div.

— Слєвін
джерело

Спробуйте встановити ширину 10 пікселів ..., а потім використовуйте слово, довше 10 пікселів

— Пол Захра