Jump to content
  • 0

Как сделать ширину текста строго под ширину div`a

LeoBit

Asked by LeoBit,

 Share

Question

LeoBit Explorer

LeoBit

Posted
Posted

Здравствуйте, вот у меня есть код "блока" под новости на главной странице, этот код = <table> в таблице естественно <tr><td>, и вот в одном из <td> есть <div> в котором текст новости идёт, затем я сделал тест, написав ~500 символов и получилось так...что внизу страницы появился ползунок, как сделать так, что бы этого полузнка не было и текст шёл строго по ширине div`a?если больше - то пускай новая строка начинается....

Взаранее спасибо.

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0
Justnewone Explorer

Justnewone

Posted
Posted
  LeoBit said:
Здравствуйте, вот у меня есть код "блока" под новости на главной странице, этот код = <table> в таблице естественно <tr><td>, и вот в одном из <td> есть <div> в котором текст новости идёт, затем я сделал тест, написав ~500 символов и получилось так...что внизу страницы появился ползунок, как сделать так, что бы этого полузнка не было и текст шёл строго по ширине div`a?если больше - то пускай новая строка начинается....

Взаранее спасибо.

Покажите ссылку.

Link to comment
Share on other sites
  • 0
LeoBit Explorer

LeoBit

Posted
  • Author
Posted 

<tr><td style="background:url('/templates/pwow/news/nl.jpg');"></td><td class="nbackg"><div class="conews" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">Проверка того как отображается новость под новостью

</div></td><td style="background:url('/templates/pwow/news/nr.jpg');"></td></tr>

Проверка <пробел> того и т.д., почему же без пробелов?

482d48ed11c9.jpg

З.Ы.Извините, у вас слишком большие мониторы B)

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
  LeoBit said: 
<tr><td style="background:url('/templates/pwow/news/nl.jpg');"></td><td class="nbackg"><div class="conews" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">Проверка того как отображается новость под новостью

</div></td><td style="background:url('/templates/pwow/news/nr.jpg');"></td></tr>

Проверка <пробел> того и т.д., почему же без пробелов?

482d48ed11c9.jpg

З.Ы.Извините, у вас слишком большие мониторы B)

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

Link to comment
Share on other sites
  • 0
InCun Explorer

InCun

Posted
Posted

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

Суть его в том, если у Вас есть блочным элемент с шириной 450px; То текст такого вида как в данном примере(без пробелов), который вылазит в строке за границу блока - будет просто напросто скрываться.....

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
  InCun said:
Думаю мое сообщение будет самым полезным по факту, а не по утешении, ибо в CSS есть такой атрибут, к сожалению на данный момент у меня вылетел с головы.

Суть его в том, если у Вас есть блочным элемент с шириной 450px; То текст такого вида как в данном примере(без пробелов), который вылазит в строке за границу блока - будет просто напросто скрываться.....

Атрибут называется overflow, Ваше Величество

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

InCun, твой совет тут не катит. Блок обрежет текст если ему будет ширина указанна. Если указать ширину то резины неполучится. А процентами тут тоже неполучится блоку ширину задать. Так как он находится внутри ячейки таблицы. Ну а ячейка как известно растягивается если содержимое невлазит, какую ширину ей не указывай. Вот и блок тянется тоже вслед за ячейкой.

Edited by mishka2
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
  mishka2 said:
InCun, твой совет тут не катит. Блок обрежет текст если ему будет ширина указанна. Если указать ширину то резины неполучится. А процентами тут тоже неполучится блоку ширину задать. Так как он находится внутри ячейки таблицы. Ну а ячейка как известно растягивается если содержимое невлазит, какую ширину ей не указывай. Вот и блок тянется тоже вслед за ячейкой.

Можно сделать чтоб не тянулось по контенту, но, самое главное, идейно я себе такой сайт плохо представляю.

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

На самом деле я не вижу тут проблем(я про сайт). Конечно если только ТС не будет выводить инфу сплошным текстом без пробелов. Но это маловероятно. Поэтому текст будет правильно отображатся.

  Quote
Можно сделать чтоб не тянулось по контенту, но, самое главное, идейно я себе такой сайт плохо представляю.

Ну чего - например сделать сайт чтобы все от всех спрятать B)

Link to comment
Share on other sites
  • 0
InCun Explorer

InCun

Posted
Posted
  mishka2 said:
InCun, твой совет тут не катит. Блок обрежет текст если ему будет ширина указанна. Если указать ширину то резины неполучится. А процентами тут тоже неполучится блоку ширину задать. Так как он находится внутри ячейки таблицы. Ну а ячейка как известно растягивается если содержимое невлазит, какую ширину ей не указывай. Вот и блок тянется тоже вслед за ячейкой.

Теперь понял, а никаким образом зафиксировать max-widht нельзя? с использованием JS ?

Link to comment
Share on other sites
  • 0
LeoBit Explorer

LeoBit

Posted
  • Author
Posted

Ой, друзья B) спасибо, я то думал что за пробелы...)) ну дык пробелы будут, просто в связи с закрытием упячки у меня теперь почти весь текст слитно пишется B) В общем всем спасибо тему можно закрыть

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept