CSS text-overflow: ellipsis; nie działa?
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>
Powinien odciąć się około 4. "testu"
15 answers
text-overflow:ellipsis;
działa tylko wtedy, gdy następujące są prawdziwe:
- Szerokość elementu musi być ograniczona w
px
(piksele). Szerokość w%
(procent) nie będzie działać. - element musi mieć
overflow:hidden
iwhite-space:nowrap
ustawione.
Powodem, dla którego masz problemy, jest to, że width
twojego elementu a
nie jest ograniczony. Masz ustawienie width
, ale ponieważ element jest ustawiony na display:inline
(tzn. domyślne), ignoruje je i nic innego nie ogranicza jego szerokości ani jedno, ani drugie.
- Ustaw element na
display:inline-block
lubdisplay:block
(prawdopodobnie pierwszy, ale zależy od potrzeb układu). - Ustaw jeden z elementów kontenera na
display:block
i nadaj temu elementowi stałąwidth
lubmax-width
. - Ustaw element na
float:left
lubfloat:right
(prawdopodobnie pierwszy, ale ponownie, albo powinien mieć taki sam efekt, jeśli chodzi o elipsę).
Proponuję display:inline-block
, ponieważ będzie to minimalny wpływ zabezpieczenia na układ; działa bardzo podobnie do display:inline
, którego używa obecnie, jeśli chodzi o układ, ale nie krępuj się eksperymentować z innymi punktami, jak również; starałem się 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, jak różne style współpracują ze sobą.
Oto fragment z Twoim kodem, z dodanym display:inline-block
, aby pokazać, jak blisko jesteś byliśmy.
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
display: inline-block;
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>
Przydatne referencje:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-23 11:12:06
Przyjęta odpowiedź jest niesamowita. Możesz jednak nadal używać %
width i osiągać text-overflow: ellipsis
. Rozwiązanie jest proste:
display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */
Wydaje się, że za każdym razem, gdy używasz calc
, ostateczna wartość jest renderowana w pikselach bezwzględnych, co w konsekwencji konwertuje 80%
na coś w rodzaju 800px
dla kontenera o szerokości 1000px
. Dlatego zamiast używać width: [YOUR PERCENT]%
, użyj width: calc([YOUR PERCENT]%)
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-01 12:45:01
Więc jeśli osiągniesz to pytanie, ponieważ masz problem z uruchomieniem elipsy wewnątrz display: flex
kontenera, spróbuj dodać min-width: 0
do kontenera, który jest przepełniony jego rodzicem, mimo że ustawiłeś już overflow: hidden
na nim i zobacz, jak to działa.
Więcej SZCZEGÓŁÓW I roboczy przykład na ten codepen by aj-foster . W moim przypadku zadziałało.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-14 17:40:43
Dołącz cztery linie napisane po informacji o elipsie do pracy
.app a
{
color: #fff;
font: bold 15px/18px Arial;
height: 18px;
margin: 0 5px 0 5px;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 140px;
/*
Note: The Below 4 Lines are necessary for ellipsis to work.
*/
display: block;/* Change it as per your requirement. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-12 22:00:58
Upewnij się również, że word-wrap
jest ustawione na normal dla IE10 i poniżej.
poniższe standardy definiują zachowanie tej właściwości jako zależne od ustawienia właściwości "Text-wrap". Jednak ustawienia wordWrap są zawsze skuteczne w Windows Internet Explorer, ponieważ Internet Explorer nie obsługuje właściwości "zawijanie tekstu".
Stąd w moim przypadku word-wrap
zostało ustawione na break-word (dziedziczone czy domyślnie?) powoduje, że text-overflow
pracuje w FF i Chrome, ale nie w IE.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-06 10:22:29
anchor
,span
... tagi są elementy inline domyślnie w przypadku elementów wbudowanych właściwość width
nie działa. Więc musisz przekonwertować swój element na inline-block
lub block level
elementy
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-20 06:58:44
Dodaj display: block;
LUB display: inline-block;
do swojego #User_Apps_Content .DLD_App a
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-22 03:16:37
Wystarczy dodać jedną linię css:
.app a {
display: inline-block;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-18 07:59:10
W bootstrap 4, możesz dodać klasę .text-truncate
, aby obciąć tekst wielokropkiem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
The quick brown fox jumps over the lazy dog.
</span>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-06 02:23:17
Musi zawierać
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Nie może zawierać
display: inline
Powinien zawierać
position: sticky
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-29 23:44:31
Spotkałem się z tym samym problemem i wydaje się, że żadne z powyższych rozwiązań nie działa dla Safari. W przypadku przeglądarek innych niż safari działa to dobrze:
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/ Align = "left"/ Zwróć uwagę, że Zapytanie o media, aby sprawdzić, czy przeglądarka jest Safari, może się zmieniać z czasem, więc po prostu majstruj przy zapytaniu o media, jeśli nie działa. Dzięki właściwości line-clamp
możliwe byłoby również posiadanie wielu linii w sieci z wielokropkami, zobacz tutaj .
// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
@media {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
white-space: normal;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-30 03:47:25
Https://stackoverflow.com/a/53784508/5626747
Nie mogę skomentować ze względu na reputację, więc robię kolejną odpowiedź:
W tym przypadku będziesz musiał również usunąć ogólnie sugerowaną Właściwość display: block;
z elementu, na którym Ustawiłeś text-overflow: ellipsis;
, lub zostanie ona odcięta bez ... na końcu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-09 16:32:37
Musiałem zrobić kilka długich opisów elipsy(wziąć tylko jeden pas) będąc responsywnym, więc moim rozwiązaniem było, aby tekst zawijał się(zamiast white-space: nowrap
) i zamiast stałej szerokości dodałem stałą wysokość:
span {
display: inline-block;
line-height: 1rem;
height: 1rem;
overflow: hidden;
// OPTIONAL LINES
width: 75%;
background: green;
// white-space: normal; default
}
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-04 05:24:09
Możesz również dodać float: left; wewnątrz tej klasy # User_Apps_Content .DLD_App a
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-22 07:41:05
Zapisz je w swojej regułce css.
display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-07 06:29:51