CSS bez zawijania tekstów

Patrz kod http://jsbin.com/eveqe3/edit, również cytowany poniżej.CSS bez zawijania tekstów

Potrzebuję pokazać tekst wewnątrz elementu divs w taki sposób, że tekst pojawia się tylko w zielonym polu o określonej szerokości reszta linii musi być ukryta. Wszelkie sugestie proszę ...

<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>

Źródło

2010-07-22 Mithun Sreedharan

Po prostu FYI, jeśli ustawić wysokość do 12px, z 2px wyściółką należy użyć font-size: 10px więc granica robi nie obejmuje dna postaci. Zamiast tego wolę używać EM jako miary, aby lepiej skalować zmiany użytkowników. –

Pamiętaj, aby wyświetlić wynik we wszystkich docelowych przeglądarkach, ponieważ czcionka/rozmiar jest różny. –

Sure @Mark, dziękuję –

104

Dodatkowo przepełnienie: ukryte, użyj

white-space:nowrap;

Źródło

2010-07-22 11:46:17

tak !, ten jest tym, czego chcę! –

Wystarczy użyć:

overflow: hidden; 
white-space: nowrap;

W div swój przedmiot w

Źródło

2010-07-22 11:37:14 Macmade

Użyj przepełnienie właściwości CSS. Na przykład:

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

Obiekt przelewowy może mieć jedną z wielu wartości, takich jak (ukrytych, przewijania, widoczny) .. można als kontroli przepełnienia tylko w jednym kierunku za pomocą overflow-x lub przepełnienie-y.

ja ho

Źródło

2010-07-22 11:38:41 dejavu

Zobacz "przepełnienie: ukryte" zastosowane tutaj jsbin.com/eveqe3/2/edit, część drugiej linii jest widoczna w pudełku. Czy można uniknąć wprowadzania tekstu do następnej linii? –

CSS bez zawijania tekstów

Odpowiedz

Powiązane problemy