Nie wiem, dlaczego ten prosty CSS nie działa ...
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}
<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>
Należy odciąć około 4. „testu”
FF only
- jeślifilter
zostanie zastosowane, elipsa nie będzie renderowana. błąd otwartytext-overflow
: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflowOdpowiedzi:
text-overflow:ellipsis;
działa tylko wtedy, gdy są spełnione następujące warunki:px
(pikselach). Szerokość w%
(procentach) nie będzie działać.overflow:hidden
iwhite-space:nowrap
ustawiony.Powodem, dla którego masz problemy, jest to, że
width
twója
element nie jest ograniczony. Maszwidth
ustawienie, ale ponieważ element jest ustawiony nadisplay:inline
(tj. Domyślny), ignoruje go i nic innego nie ogranicza jego szerokości.Możesz to naprawić, wykonując jedną z następujących czynności:
display:inline-block
lubdisplay:block
(prawdopodobnie ten pierwszy, ale zależy od potrzeb układu).display:block
i nadaj temu elementowi staływidth
lubmax-width
.float:left
lubfloat:right
(prawdopodobnie ten pierwszy, ale znowu, oba powinny mieć taki sam efekt, jeśli chodzi o elipsę).Sugeruję
display:inline-block
, ponieważ będzie to miało minimalny wpływ na twój układ; działa bardzo podobnie, jakdisplay:inline
obecnie, jeśli chodzi o układ, ale możesz eksperymentować również z innymi punktami; Próbowałem podać jak najwięcej informacji, aby pomóc ci zrozumieć, jak te rzeczy współdziałają ze sobą; duża część zrozumienia CSS polega na zrozumieniu, w jaki sposób różne style współpracują ze sobą.Oto fragment kodu wraz z
display:inline-block
dodanym kodem , który pokazuje, jak blisko byłeś.Przydatne referencje:
źródło
white-space: nowrap
rzeczywistości nie jest konieczne. Wciąż możemy zobaczyć elipsy nawet bez niego. W przypadku wielu wierszytext-overflow
zobacz ten SOwhite-space: nowrap
jest wymagane.width
. Wszystko, co musisz zrobić, to ustawićwhite-space: nowrap;
i działa dobrze.Przyjęta odpowiedź jest niesamowita. Możesz jednak nadal używać
%
szerokości i osiągaćtext-overflow: ellipsis
. Rozwiązanie jest proste:Wydaje się, że za każdym razem
calc
końcowa wartość jest renderowana w pikselach bezwzględnych, co w konsekwencji przekształca80%
się w coś podobnego800px
do1000px
kontenera o szerokości. Dlatego zamiast używaćwidth: [YOUR PERCENT]%
, użyjwidth: calc([YOUR PERCENT]%)
.źródło
Jeśli więc odpowiesz na to pytanie, ponieważ masz problem z uruchomieniem wielokropka w
display: flex
kontenerze, spróbuj dodaćmin-width: 0
do skrajnego kontenera, który jest przepełniony jego elementem nadrzędnym, nawet jeśli już go ustawiłeśoverflow: hidden
, i zobacz, jak to działa.Więcej szczegółów i działający przykład na tym codepen autorstwa aj- fostera . W moim przypadku całkiem nieźle.
źródło
position: sticky
elementu wdisplay: flex
kontenerze.Upewnij się również, że
word-wrap
jest ustawiony na normalny dla IE10 i niższych.Poniższe standardy definiują zachowanie tej właściwości jako zależne od ustawienia właściwości „zawijania tekstu”. Jednak ustawienia wordWrap są zawsze skuteczne w Windows Internet Explorer, ponieważ Internet Explorer nie obsługuje właściwości „zawijania tekstu”.
Stąd w moim przypadku
word-wrap
ustawiono słowo kluczowe (odziedziczone czy domyślnie?) Powodującetext-overflow
działanie w FF i Chrome, ale nie w IE.informacje ms na temat właściwości zawijania słów
źródło
anchor
,span
... tagi są domyślnie elementami wbudowanymi. W przypadku elementów wbudowanychwidth
właściwość nie działa. Więc musisz przekonwertować swój element na jedeninline-block
lub jedenblock level
elementźródło
Dołącz cztery wiersze napisane po informacji o elipsie do działania
źródło
Dodaj
display: block;
lubdisplay: inline-block;
do swojego#User_Apps_Content .DLD_App a
próbny
źródło
Po prostu dodajesz jedną linię css:
źródło
W bootstrap 4 możesz dodać
.text-truncate
klasę, która obcina tekst za pomocą wielokropka.źródło
Musi zawierać
NIE MOŻE zawierać
Powinien zawierać
źródło
Możesz także dodać float: left; wewnątrz tej klasy #User_Apps_Content .DLD_App a
źródło
Musiałem zrobić kilka długich opisów elipsą (wziąć tylko jeden pas), będąc jednocześnie responsywnym, więc moim rozwiązaniem było pozostawienie tekstu (zamiast
white-space: nowrap
) i zamiast stałej szerokości dodałem stałą wysokość:źródło
To jest kod, który pozwala:
przepełnienie: ukryty jest wymagany
źródło
Napotkałem ten sam problem i wydaje się, że żadne z powyższych rozwiązań nie działa w przeglądarce Safari. W przypadku przeglądarki innej niż Safari działa to dobrze:
W przypadku Safari ten działa dla mnie. Pamiętaj, że zapytanie o media, aby sprawdzić, czy przeglądarka to Safari, może się zmieniać z czasem, więc po prostu majstruj przy zapytaniu o media, jeśli nie działa dla ciebie. W przypadku
line-clamp
właściwości można również mieć wiele linii w sieci za pomocą wielokropka, patrz tutaj .źródło
https://stackoverflow.com/a/53784508/5626747
Nie mogę komentować z powodu reputacji, więc udzielam innej odpowiedzi:
W takim przypadku musisz również usunąć ogólnie sugerowaną
display: block;
właściwość z elementu, który ustawiłeśtext-overflow: ellipsis;
, lub zostanie odcięty bez ... na końcu.źródło
źródło