Проблема макета CSS с таблицей в DIV - PullRequest
Новая
       16

Проблема макета CSS с таблицей в DIV

0 голосов
/ 08 декабря 2010

Почему "aaaaaaaaa..." не переходит на новую строку и не выходит из div? 

<head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

#container {
    background: #888888;
    color: white;
    width: 200px;
    padding: 20px;
}

#container li {
    list-style: none;
}

#container td {
    padding-right: 20px;
}
</style>
</head>

<div id="container">
<table>
    <tbody>
        <tr>
            <td>one</td>
            <td>
                <ul>
                    <li>two</li>
                    <li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>
</div>

Ответы [ 2 ]

1 голос
/ 08 декабря 2010

Если в вашем слове нет пробелов, то ваша таблица расширится, чтобы соответствовать слову.Вы ничего не можете с этим поделать (во всяком случае, с css).Перенос слов работает только с реальным словом (т. Е. С пробелами в них).

Решение, которое будет работать для вас, хотя и будет использовать &shy; (мягкий дефис) 

<li>aaaaaaaaaaaaaaaaaa&shy;aaaaaaaaaaaaaaaaaaaa</li>

перерыв в середине.Он сломается там только в случае необходимости - если он не помещается в родительский контейнер.

Существует множество других доступных решений, большинство из которых ненадежны в кросс-браузерном режиме или нарушают ваш дизайн:

Тег разрыва слова: <wbr> ненадежен.CSS-оператор переполнения нарушит ваш дизайн (переполнение: авто) или скроет содержимое (переполнение: скрыто)

Так что, по сути, нелегкое решение.Мягкий дефис будет работать лучше всего, если вы сможете его использовать.

Вы можете посмотреть дефис , способ автоматизировать такие перерывы на работе на вашем сайте.

Для вашегоизменить, если это переменная, то я бы определенно с дефисом.

0 голосов
/ 08 декабря 2010

Что вам нужно, так это функция css3 перенос слов : http://www.css3.info/preview/word-wrap/

У этого есть некоторые проблемы совместимости браузера, но я думаю, что если вы решили использовать такие длинные слова, это вариант.

Это образец: http://jsfiddle.net/VXgdS/2/

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

Нет похожих вопросов

...