CSS не обтікає текст

78

Будь ласка, див. Код http://jsbin.com/eveqe3/edit , також цитований нижче.

Мені потрібно показати текст усередині div div елемента таким чином, щоб текст відображався лише у зеленому полі із зазначеною шириною, а решту рядка потрібно приховувати. Будь-які пропозиції, будь ласка ...

<style>
  #container{
    width : 220px;
  }
  .item{
    float:left;
    border: 1px solid #0a0;
    width: 100px;
    height: 12px;
    padding 2px;
    margin: 0px 2px;
  }
  .clearfix{
    clear: both;
  }
</style>
</head>
<body>
  <div id="container">
    <div class="item"> A very loooooooooooooooooooooong text </div>
    <div class="item"> Another looooooooooooooooooooong text </div>
    <div class="clearfix">  </div>
   </div>
</body>
</html>

html css text

— Мітхун Зрідхаран
джерело

Просто FYI, якщо ви встановите свою висоту 12 пікселів, із заповненням 2 пікселі ви повинні використовувати розмір шрифту: 10 пікселів, щоб межа не покривала нижню частину символів. Я вважаю за краще використовувати EM як міру, проте, щоб вона краще масштабувалась при змінах користувачів.

— Mark Schultheiss

Обов’язково перегляньте свій результат у всіх цільових браузерах, оскільки шрифт / розмір за замовчуванням відрізняються.

— Mark Schultheiss

193

Додатково до переповнення: приховано, використовуйте

white-space:nowrap;

— xor_eq
джерело

1

так !, ось що я хочу!

— Mithun Sreedharan

1

Просто думав, що я можу щось сюди додати, оскільки не вдалося змусити мій блок <pre> зупинити обтікання, попередній елемент pre {} css, звичайно, перевершував все, що я намагався зробити з класом .pre {}. Це може бути причиною скорботи деяких людей.

— MitchellK

26

Просто використовуйте:

overflow: hidden;
white-space: nowrap;

У розділах div вашого товару

— Macmade
джерело

3

Використовуйте властивість css overflow. Наприклад:

  .item{
    width : 100px;
    overflow:hidden;
  }

Властивість overflow може мати одне з багатьох значень, таких як ( прихований , прокрутка , видимий ) .. Ви також можете контролювати переповнення в одному напрямку, використовуючи overflow-x або overflow-y .

Сподіваюся, це допоможе.

— Ахмед Аман
джерело

Будь ласка, зверніться до overflow:hiddenзастосованого тут jsbin.com/eveqe3/2/edit, частина другого рядка видно у полі. Чи можна уникнути надходження тексту в наступний рядок?

— Mithun Sreedharan