Применение переноса текста с использованием CSS - PullRequest
Новая
       16

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

0 голосов
/ 29 августа 2011

я пытаюсь применить перенос текста к td (данные таблицы), используя: 

.gvUpdatesStyle .updateSummary {width:200px; white-space:normal;}

Но это не работает, и td превышает 200px.

Редактировать: Вот HTML, но обратите внимание, что это генерируется GridView: 

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="ContentPlaceHolder1_gvUpdates" rules="all" class="marginLeftRightBottom10px center gvUpdatesStyle">
    <tbody><tr>
        <th scope="col">Update Id</th><th scope="col">Date</th><th scope="col">Text</th>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$0')">17</a></td><td>29 ta' Awissu</td><td class="updateSummary">fgdfgdfgdfgfd</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$1')">18</a></td><td>29 ta' Awissu</td><td class="updateSummary">dfgdfgdfgfdg</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$2')">4</a></td><td>27 ta' Awissu</td><td class="updateSummary">dsfsdfdsfdfgfdgfdgfd</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$3')">5</a></td><td>27 ta' Awissu</td><td class="updateSummary">jkljl</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$4')">0</a></td><td>15 ta' Awissu</td><td class="updateSummary">testlol</td>
    </tr>
</tbody></table>

Редактировать: В ходе дальнейшего тестирования я обнаружил, что он на самом деле не работает с очень длинным вводом, и выглядит так:*

Ответы [ 2 ]

1 голос
/ 29 августа 2011

Попробуйте это: 

.gvUpdatesStyle .updateSummary td {width:200px; white-space:normal;}

Это явно применяет стиль к элементам td, которые соответствуют вашим селекторам классов .gvUpdatesStyle и .updateSummary

РЕДАКТИРОВАТЬ: Исходя из вашего недавно опубликованного HTML, похоже, что вы просто перебираете.у меня это сработало 

.gvUpdatesStyle td {width:200px; word-wrap:break-word; }

Хотя теперь, когда я попробую это сделать, оно работает и с другими селекторами, которые вы ранее опубликовали: 

.gvUpdatesStyle .updateSummary {width:200px; word-wrap:break-word; }

EDIT #42: Это работает в Chrome, Firefox и IE 

.gvUpdatesStyle .updateSummary { width:200px; max-width:200px; word-wrap:break-word; }
0 голосов
/ 30 августа 2011

В тексте элемента нет пробелов, поэтому возможность переноса не предоставляется.

См. Обработку пробелов здесь: http://www.w3.org/TR/CSS2/text.html#propdef-white-space

РЕДАКТИРОВАТЬ: Обратите внимание на то же самое на этом примере страницы: http://jsbin.com/equday/edit#preview, где текст выходит за границы контейнера.

...