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

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

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ść.

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.

Możesz użyć właściwości CSS przepełnienia tekstu, aby skrócić długie teksty.

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

źródło: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

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.

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

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; 

}

Spróbuj dodać tę klasę, aby rozwiązać problem:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Więcej wyjaśnień w tym linku http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? Albo auto. w atrybucie stylu.

Myślę, że powinieneś zacząć od podstaw z w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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.

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>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

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

­

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