Czy mogę zapobiec przepełnieniu tekstu w bloku div?

132

Czy mogę zapobiec przepełnieniu tekstu w bloku div?

Clement Herreman
źródło
1
dlaczego twój tekst jest przepełniony?
Virat Kadaru,
3
@ViratKadaru ... ponieważ jest to 360pt Gregorian Chant Serif
DukeDidntNukeEm

Odpowiedzi:

163

Jeśli chcesz, aby przepełniony tekst w elemencie div automatycznie tworzył nową linię zamiast być ukrywany lub tworzyć pasek przewijania, użyj

word-wrap: break-word

własność.

Amalgovinus
źródło
Użytkownik musi to zaznaczyć jako odpowiedź. Dziś zadziałało! Dzięki kolego!
Eduardo A. Fernández Díaz
o mój Boże, dziękuję ci bardzo za ten jeden, dosłownie oszalałem z powodu pewnych problemów, które mogłem rozwiązać twoją odpowiedzią! XD
Sven
77

Możesz spróbować:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

Sprawdź docs dla właściwości przelewowym , aby uzyskać więcej informacji.

brettkelly
źródło
34
To nie są „dokumenty”, to witryna internetowa zawierająca podstawowe informacje o HTML / CSS. Dokumentacja jest dostępna pod adresem w3.org
DisgruntledGoat
18

Możesz to kontrolować za pomocą CSS, jest kilka opcji:

  • ukryty -> Cały tekst przepełniony zostanie ukryty.
  • widoczny -> Niech przepełniony tekst będzie widoczny.
  • scroll -> wstaw paski przewijania, jeśli tekst się przepełnia

Mam nadzieję, że to pomoże.

Timothée Martin
źródło
15

Po prostu użyj tego:

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 */
Pmpr
źródło
11

jest jeszcze jedna właściwość css:

white-space : normal;

Właściwość odstępu kontroluje sposób obsługi tekstu w elemencie, do którego jest stosowany.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}
Sachin
źródło
1
Jest to bardzo pomocne w połączeniu z przepełnieniem: ukryty;
koppor
4

overflow: scroll? Albo auto. w atrybucie stylu.

fasola
źródło
1

Jeśli twój div ma określoną wysokość w css, spowoduje to przepełnienie go poza div.

Możesz nadać elementowi div minimalną wysokość, jeśli chcesz, aby zawsze był minimalny.

Jednak minimalna wysokość nie będzie działać w IE6, jeśli masz arkusz stylów specyficzny dla IE6, możesz nadać mu zwykłą wysokość dla IE6. Zmiany wysokości w IE6 zgodnie z zawartością.

Sir David of Lee
źródło
1

Możesz po prostu ustawić minimalną szerokość w css, na przykład:

.someClass{min-width: 980px;}

Nie zepsuje się, niemniej jednak nadal będziesz mieć do czynienia z paskiem przewijania.

Damir Olejar
źródło
1

Zalecenia dotyczące wychwytywania, która część kodu CSS powoduje problem:

1) ustaw style="height:auto;"wszystkie <div>elementy i spróbuj ponownie.

2) Ustaw style="border: 3px solid red;"wszystkie <div>elementy, aby zobaczyć, jak szeroki obszar zajmuje twoje <div>pudełko.

3) Usuń wszystkie height:#px;właściwości CSS ze swojego CSS i zacznij od nowa.

Na przykład:

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>
Gen
źródło
1
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}
<div class="NonOverflow">
    Long Text
</div>
Kirtan
źródło
w tekście wielojęzycznym innym niż powoduje, że niektóre znaki długich słów są ukrywane.
Bhupi
0

!! Zakodowana wymiana przed nami !! W zależności od otaczającego kodu i rozdzielczości ekranu może to prowadzić do innego / niepożądanego zachowania

Jeśli ukryte przepełnienie nie wchodzi w grę i potrzebne jest prawidłowe dzielenie wyrazów, możesz użyć encji HTML z łącznikiem miękkim, w którym chcesz, aby słowo / tekst zostało przerwane. W ten sposób możesz ręcznie określić punkt przerwania.

&shy;

Łącznik pojawi się tylko wtedy, gdy słowo musi zostać przerwane, aby nie przepełniło otaczającego go pojemnika.

Przykład:

<div class="container">
  foo&shy;bar
</div>

Wynik, jeśli kontener jest wystarczająco szeroki, a tekst nie przepełniłby kontenera:

foobar

Wynik, jeśli kontener jest zbyt mały, a tekst faktycznie przepełniłby kontener:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}
Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Więcej informacji: https://en.wikipedia.org/wiki/Soft_hyphen

janDo
źródło