Nie da się, nie w samym CSS przy jego obecnym stanie.
Możesz użyć własności overflow i ustawić ją na scroll (wtedy wyświetli się pasek przewijania) lub hidden (wtedy paska nie będzie, a zbyt długa linia zostanie po prostu ucięta). W obu przypadkach element powinien też mieć ograniczoną szerokość, czyli np. trzeba mu ustawić width.
Podsumowując:
#mojdiv {
width: 400px;
overflow: hidden;
}
I mamy uciętą zawartość. W długim słowie nie nastąpi jednak przeniesienie do nowej linii.
Inna opcja to użycie specjalnych znaków. Wymaga to jednak dynamicznej ingerencji w kod HTML. Jest taki znak, co po angielsku zwie się "soft hyphen". W HTML-u zapisujemy go, używając odniesienia znakowego . Teoretycznie powinno to działać tak, że jeśli wstawisz ten znak w dowolne słowo, to jest to informacja dla przeglądarki, że w tym miejscu może podzielić to słowo, wstawiając myślnik. Jeśli słowo by się spokojnie zmieściło w jednej linii, to znak jest niewidoczny. Jeśli jednak miejsca brak, to przeglądarka może złamać wyraz w tym miejscu i przejść do następnego wiersza, wstawiając myślnik po pierwszej części wyrazu. Czyli np. piszesz (zauważ ):
konstantynopolitańczy­kowianeczka
I może to zostać wyświetlone normalnie, jak:
konstantynopolitańczykowianeczka
Ale jeśli przeglądarka uzna, że wyraz jest za długi i dobrze by było złamać wiersz, to powinna to zrobić w miejscu, gdzie jest :
konstantynopolitańczy-
kowianeczka
Jest pewien szkopuł. Odwołanie niestety nie jest obsługiwane przez wszystkie przeglądarki. No i nie ma tu żadnej automatyki. Te trzeba powstawiać. W dodatku w dobrych miejscach. Ze względu na złożone reguły dzielenia wyrazów, wymaga to zastosowania słowników.
Jeszcze większy ból to łamanie słów przy pomocy JavaScriptu. JavaScript mógłby dynamicznie wykrywać gdzie przydałoby się złamać słowo i wstawiać tam spację (być może nawet z myślnikiem). To jednak wymaga włączonego JavaScriptu. Poza tym znowu natrafiamy tu na ten sam problem: podziały trzeba wstawić w dobrych miejscach.
Na pewno nie pisz tego samodzielnie. Możesz jednak sprawdzić gotowe narzędzia, np. javascriptowy Hyphenator.
Ja przeważnie stosuję inne rozwiązanie, które jednak sprawdza się tylko w określonych okolicznościach -- głównie przy niewielkich polach tekstowych o stałych rozmiarach. Otóż normalnie stosuję overflow: hidden, czasami dodając po prawej stronie odpowiednio pozycjonowany obrazek z półprzezroczystym gradientem. Dzięki temu obrazkowi wygląda to tak, że gdy słowo jest długie, to po prawej stronie elementu zaczyna jakby znikać. Ma to być sugestią, że słowo jest ucinane. Jednak gdy najedzie się na element myszą, deklaracja overflow: hidden jest wyłączana i/lub pole zyskuje na szerokości tak, by pomieścić całą zawartość. Dzięki temu normalnie nie ma bałaganu, a jak ktoś chce, to sobie może najechać myszą i zobaczyć całą treść. Dodatkowo, element po najechaniu myszą zyskuje nieraz pozycjonowanie absolutne lub robię inne zabezpieczenie przed tym, żeby szerokość całego layoutu nagle mi nie wzrosła (tak jak na 4p.net). Wolę, żeby element po najechaniu myszą ewentualnie zasłonił chwilowo inne niż rozepchał cały layout.
Zmiana stylów po najechaniu myszą jest oczywiście realizowana przez selektor z pseudoklasą :hover. Niestety, IE6 obsługuje ją tylko na łączach. Czasem nie jest to problemem, bo te elementy z ucinaną treścią akurat zdarzają się być łączami. Gdy jednak nimi nie są, to dla IE6 piszę maciupki skrypt w JavaScripcie, który po najechaniu myszą dodaje (zwykłą) klasę hover, a w stylach używam zarówno selektora z pseudoklasą :hover, jak i z klasą .hover.
Jak widzisz, nie ma na to póki co prostego, uniwersalnego i przyjemnego rozwiązania. Być może dlatego tak często problem ten jest po prostu olewany, ew. stosowane jest proste, ale nie-idealne rozwiązanie.