Długi ciąg znaków w <div> - jak ograniczyć jego szerok

0

Mam długi ciąg znaków, nie rozdzielony spacjami ani żadnymi innymi białymi znakami, np.:

aabababababassapoaspoigfashioghaoighaiohfioashdwfsajpofasjpojgpoajgaspogjaposjgaspogjapojgopsajpogsioghioewhtoiwhgiehhhhhoiuhcfgcgfcgfcgfcgfcgfohihihiohoiuigiygioguigiuguigiugiuoguigpodposgposioshoierhgioehioghieoghioshehgioes

Jak widzicie, także tutaj na forum nie jest on po przekroczeniu ustalonej szerokości przenoszony do nowej linii, ale forum jest rozciągane (zależnie od rozdzielczości u Ciebie może to nie być widoczne).

Mam jakiś element blokowy (dajmy na to,

), chcę do niego móc wpisywać takie długie ciągi, a on ma mi je przenosić do nowych linii po przekroczeniu ustalonej szerokości - czy da się (a jeśli tak to jak) to zrobić?</p>
0

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&shy;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.

0

W moim przypadku ten ciąg nie jest sensowny, to po prostu zestaw różnych znaków, jednak pojawienie się między nimi dodatkowego myślnika jest niedopuszczalne (jest to zaszyfrowana forma innego ciągu, dodatkowy znak uniemożliwi odszyfrowanie). W związku z tym, myślę, że najlepiej będzie skorzystać/napisać JS przenoszący do nowej linii po iluś znakach... Zaraz, zaraz - ale przecież znak nowej linii również popsuje mi ten ciąg, czyż nie? Zastanawiam się, jak działa na forach - tam taki długi ciąg jest rozdzielony na kolejne linie, a nie są dodawane żadne nowe znaki.

0

Nie jest tak jak piszesz. Mozesz przy użyciu JS wstawiać na końcach linii zwykły , np /n, i dać mu hidden, przy czym każdy span to nowa linia o co już zadba JS

0

Można także umieścić każdą linię w jednym elemencie. Niektórzy używają do czegoś takiego listy ol i każdą linię opakowują w jedno li. W CSS wyłączają oczywiście markery itd. Nie trzeba używać list. Można to zrobić spanami czy paragrafami -- byleby tylko poszczególne elementy reprezentujące linie miały display: block. W ten sposób w ogóle nigdzie nie będziesz miał znaków nowej linii. Podział na linie zostanie wymuszony przez to display: block. Przy kopiowaniu nie powinny więc się pojawić niechciane znaki nowej linii.

0

To wszystko docelowo ma być umieszczone w BBCode (można do ich tworzenia używać HTML + JS) - na podstawie zadanego ciągu bez białych znaków muszę go podzielić na kolejne linie nie przekraczające ustalonej szerokości - dlatego też ręczne wpisywanie odpada, trzeba będzie sprytny JS naskrobać.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0