"завернуть в слово" LI в UL - PullRequest
Новая
       20

"завернуть в слово" LI в UL

0 голосов
/ 03 апреля 2009

Я хотел бы перенести некоторый текст на следующую строку, которую я держал в LI - обтекание должно выполняться динамически, поэтому я смотрю в сторону CSS

Я хочу, чтобы это выглядело примерно так: 

<ul>
    <li> normal sized </li>
    <li> big massive long one that i'd like to wrap to the next line like below </li>
    <li> the result that
            i'd like to see </li>
</ul>

Мне не нужны полосы прокрутки, и я не хочу, чтобы они уходили со страницы, и установка ширины UL или LI в CSS, похоже, не делает этого для меня. Есть идеи? Я уверен, что это что-то тривиальное, что я скучаю

Спасибо

Редактировать: Я попробовал эти решения без везения - сами по себе они работают нормально. Поэтому я должен сделать вывод, что проблема лежит где-то в коде jQuery, который я использую. (используя плагин с именем jqueryFileTree). Код извлекает имя файла, поэтому, вероятно, существует проблема с разрывом строки

Ответы [ 3 ]

10 голосов
/ 03 апреля 2009

Установка ширины элемента ul должна помочь. Я попробовал это на вашем базовом примере, и он работает в FF3, IE 5.5-8. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>test</title>
        <style type="text/css" media="screen">
            ul {
                width: 80px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li> normal sized </li>
            <li> big massive long one that i'd like to wrap to the next line like below </li>
            <li> the result that i'd like to see </li>
        </ul>
    </body>
</html>
3 голосов
/ 03 апреля 2009

Текст будет обернут сам по себе, без CSS вообще, когда он достигнет конца области просмотра («область просмотра» в браузере) или конца его элементов указанной ширины. Это относится ко всем элементам, если они изначально не расположены абсолютно вне области просмотра.

Я должен сказать, что хотел бы знать, как вы фактически расширили текст за пределы области просмотра или ширины UL / LI.

1 голос
/ 03 апреля 2009

Как вы устанавливаете ширину элемента?

Следующее не будет работать: 

<ul width="100">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

Вам необходимо установить ширину либо в CSS, либо в свойстве стиля тега: 

<ul style="width: 100px;">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

или вы можете создать класс css вместо установки ширины для каждого ul на странице: 

<style type="text/css" media="screen">
    .smallList {
        width: 100px;
    }
</style>

<ul class="smallList">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...