Как я могу разбить длинные слова вместо переполнения? - PullRequest
4 голосов
/ 18 мая 2010

Как я могу остановить этот текст от переполнения?

<html>
<head>
<style type="text/css">
.sticky
{
    background-color: #FCFC80;
    margin: 5px;
    height: 100px;
    width: 135px;
}
.sticky .edit
{
    vertical-align:middle;
    height: 100px;
    position:relative;
    color:Black;    
    background-color:blue;
    height:90px;
    vertical-align:middle;
    width:90px;
    border-collapse:collapse;

}
</style>
</head>
<body>
<div id="note44" class="sticky">
<div id="text44" class="edit" title="Click to edit" style="">A very long word: abcdefasdfasfasd</div>
</div>
</body>
</html>

Ответы [ 5 ]

5 голосов
/ 18 мая 2010

I думаете перенос слов поддерживается в большинстве браузеров?

word-wrap:break-word;
1 голос
/ 18 мая 2010

Зависит от того, каким должен быть желаемый вывод, но если вы хотите использовать дефис слова, вы можете использовать &shy;, то есть заменить "abcdefasdfasfasd", скажем, abcdef&shy;asdfasfasd.

Вы также можете взглянуть на свойство переполнения .

0 голосов
/ 18 мая 2010

CSS, упомянутый выше, не будет работать во всех браузерах, так как он нестандартный. Когда я сталкиваюсь с этим, я обычно использую функцию php wordwrap, но это бесполезно, если вы не используете php.

Две вещи, на которые нужно указать: Вы определили высоту второго элемента дважды в CSS. Если вы поместите текст в элемент с определенной высотой, он может переполниться и вызвать новые проблемы.

0 голосов
/ 18 мая 2010

Есть CSS-свойство под названием word-wrap. Присвой ему атрибут «брейк-слово», и ты должен идти.

.break-word {
word-wrap: break-word;
}

Источник: Стена веб-дизайнера - Принудительно переносить текст

0 голосов
/ 18 мая 2010

оправдывает делает это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...