Блог

Главная - Вопросы по программированию - Перенос текста по ширине браузера или указанной ширине, в зависимости от того, что меньше

Перенос текста по ширине браузера или указанной ширине, в зависимости от того, что меньше

#html #css #internet-explorer

#HTML #css #internet-explorer

Вопрос:

Как я могу перенести текст, отображаемый в браузере, либо на ширину браузера, либо на указанную ширину, в зависимости от того, что меньше?

Я помещал текст внутрь <table width='850'> для переноса в определенный момент, поэтому, если пользователь разворачивает свой браузер на гигантском мониторе, целый абзац не помещается в одну строку. Но когда пользователь делает браузер очень узким, описанный выше метод приводит к переносу текста за край видимой области. Не совсем то, что я хочу.

Итак, я ищу лучший подход.

О, может быть, мне следует добавить, что мои страницы чрезвычайно просты. Там нет баннеров вверх и вниз по левой или правой сторонам от них. Только текст и изображения занимают пространство от левой границы браузера до правой. Скучный материал.

РЕДАКТИРОВАТЬ — я принял ответ, но я нашел проблему (и решение, которое, похоже, работает) с принятым ответом при использовании с Internet Explorer. Я потратил полчаса, пытаясь заставить работать max-width, но просто не смог. Все остальные свойства стиля работали нормально. Затем я обнаружил это http://svendtofte.com/code/max_width_in_ie в котором говорилось, что я должен был использовать следующее для максимальной ширины для работы в IE, и это было сделано: p { width:expression(400 «px»); }. Я не понимаю, почему пример скрипки работал с максимальной шириной в IE, но не на моей странице. Может быть, это потому, что я включаю свой css в свою HTML-страницу?

Ответ №1:

Вы можете установить max-width свойство в своем css.

Таким образом, страница будет расширяться до определенного момента, а затем не более.

Пример:

 .mainDiv{
    max-width:700px;
}

Рабочий пример: http://jsfiddle.net/Pa5JG /

Подробнее о max-width : http://reference.sitepoint.com/css/max-width

Комментарии:

1. Отлично, спасибо! Существует ли корреляция между атрибутом width тега таблицы и свойством max-width? Например, когда я контролирую ширину с помощью таблиц, мне всегда нравится использовать 850 в качестве значения. Будет ли максимальная ширина 850 пикселей одинаковой?

2. Не полностью, @JohnFitzpatrick. С table width помощью, это всегда будет та ширина, независимо от размера экрана. При max-width этом элемент будет расширяться и сжиматься, но не более чем на максимум. Тем не менее, max-width:850px это должно дать вам то, что вам нужно.

3. Практически атрибут width несколько соответствует ширине css в px, но вы больше не должны использовать эти атрибуты в HTML. Используйте CSS

4. @Stein, да, я знаю. У меня есть большая книга по CSS, которую я собирался прочитать почти два года. Другие вещи продолжают мешать. Вы можете быть в ужасе, услышав, что я даже все еще использую <font> тег. Но никогда без чувства вины.

5. Я потратил полчаса, пытаясь заставить работать max-width, но просто не смог. Все остальные свойства стиля работали нормально. Затем я обнаружил это svendtofte.com/code/max_width_in_ie в котором говорилось, что я должен был использовать следующее для максимальной ширины для работы в IE, и это было сделано: p { width:expression(400 "px"); } . Кто-нибудь из вас слышал об этом? (И я не понимаю, почему пример скрипки работал с максимальной шириной в IE, но не на моей странице. Может быть, это потому, что я включаю свой css в свою HTML-страницу?)

Ответ №2:

Просто используйте max-width . Посмотрите на эту скрипку.

Метки: , ,