Текст выходит из div, если задана ширина div в процентах

0

Это мой html:

<div class="targetdiv">My Text that come out of div</div>
<style>
  .targetdiv{
     width: 24%;
     border: 1px solid red;
  }
</style>

с вышеуказанным дизайном мой текст вышел из div. Но если я изменю width и использую пиксель вместо процента, все будет в порядке:

<style>
  .targetdiv{
     width: 190px;
     border: 1px solid red;
  }
</style>

Итак, как я могу использовать процент по width а текст остается внутри div? любое предложение?

  • 0
    процент связан с шириной родителя. Таким образом, вам нужно обернуть targetDiv внутри оболочки фиксированной длины
  • 0
    @FabrizioCalderan Но я не могу установить фиксированную длину
Показать ещё 1 комментарий
Теги:

1 ответ

0

Вы можете использовать этот класс:

<style>
.targetdiv {
       width: 190px;
       border: 1px solid red;
       white-space: pre-wrap;      /* CSS3 */   
       white-space: -moz-pre-wrap; /* Firefox */    
       white-space: -pre-wrap;     /* Opera <7 */   
       white-space: -o-pre-wrap;   /* Opera 7 */    
       word-wrap: break-word;      /* IE */
    }
</style>

Оригинальный ответ был опубликован Аароном Беннеттом здесь: есть ли способ словесного переноса длинных слов в div?

И вот рабочая скрипка:

http://jsfiddle.net/LRpve/

  • 0
    Как я уже упоминал, мне нужно использовать процент в ширину, поэтому ширина будет 24% и в этом случае ваш ответ не сработал
  • 0
    он также работает с процентами: jsfiddle.net/LRpve/1

Ещё вопросы

Сообщество Overcoder
Наверх
Меню