Web-Frontend
CSS-Tutorial
Wie l?ste ich das Problem der unn?tigen Hintergrundfarbe, wenn einzelne Textzeile mit Hintergrundfarbe die Ellipsis überl?uft?
Wie l?ste ich das Problem der unn?tigen Hintergrundfarbe, wenn einzelne Textzeile mit Hintergrundfarbe die Ellipsis überl?uft?
Apr 05, 2025 pm 11:18 PM
L?sung für den überlauf von Ellipsis in einer einzigen Textzeile, die eine redundante Hintergrundfarbe verursacht
In CSS tritt bei Verwendung von text-overflow: ellipsis zum Einleitungs-Textüberlauf h?ufig auf, wenn der Text eine Hintergrundfarbe aufweist, h?ufig der Hintergrundfarbe des letzten Zeichens auftritt. Dies liegt daran, dass text-overflow: ellipsis auf den Elementen innerhalb der Zeile wirkt, w?hrend die Hintergrundfarbe auf das Textelement selbst angewendet wird, was dazu führt, dass die Hintergrundfarbe nach dem Abschneiden sichtbar ist.
Die folgende Abbildung zeigt ein Beispiel für das Problem:
Hier sind die CSS- und HTML -Codes für das Problem:
.oneline {
Breite: 640RPX;
überlauf: versteckt;
Text-Overflow: Ellipsis;
wei?er Raum: Nowrap;
Text {
Hintergrundfarbe: #999999;
Polsterung: 4RPX 8RPX;
Rand-Rechts: 12RPX;
}
}
<view class="oneline"><text wx:for="{{flavorsarr}}" wx:key="index"> {{item.label}}</text></view>
Die L?sung besteht darin, die Anzeigemethode des text auf inline-block zu ?ndern. inline-block -Element kann als ganzer Block verarbeitet werden, wodurch das durch einfache Inline-Element-Kürzung verursachte Hintergrundfarbeproblem vermieden werden kann.
Der ge?nderte CSS -Code lautet wie folgt:
.oneline {
Breite: 640RPX;
überlauf: versteckt;
Text-Overflow: Ellipsis;
wei?er Raum: Nowrap;
Text {
Anzeige: Inline-Block; / * wird an Inline-Block modifiziert */
Hintergrundfarbe: #999999;
Polsterung: 4RPX 8RPX;
Rand-Rechts: 12RPX;
}
}
Durch die Festlegung text in inline-block basiert die Textabschaltung auf dem gesamten Element, wodurch das Erscheinungsbild unn?tiger Hintergrundfarben effektiv vermieden wird und eine bessere visuelle Wirkung von textüberlaufenden Ellipsis gew?hrleistet.
Das obige ist der detaillierte Inhalt vonWie l?ste ich das Problem der unn?tigen Hintergrundfarbe, wenn einzelne Textzeile mit Hintergrundfarbe die Ellipsis überl?uft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Was ist die Akzentfarbe?
Jul 26, 2025 am 09:25 AM
Accent-Color ist ein Attribut, das in CSS verwendet wird, um die Highlight-Farben von Formularelementen wie Kontrollk?stchen, Optionsfeldern und Schieberegler anzupassen. 1. Es ?ndert direkt die Standardfarbe des ausgew?hlten Status des Formularsteuerers, z. 2. Die unterstützten Elemente umfassen Eingangsk?stchen von Typ = "Kontrollk?stchen", type = "radio" und type = "range"; 3. Die Verwendung von Akzentfarben kann komplexe benutzerdefinierte Stile und zus?tzliche DOM-Strukturen vermeiden und die native Zug?nglichkeit aufrechterhalten. 4. Es wird im Allgemeinen von modernen Browsern unterstützt, und alte Browser müssen herabgestuft werden. 5. Setzen Sie Accent-Col
Wie kompiliere ich SCSS zu CSS?
Jul 27, 2025 am 01:58 AM
InstallDartSassvianPmafterInstallingNode.jSusingnpMinstall-GSASS.2.comPilescsSusingTheCommandSassinput.Scsoutput.csks.3. Usesass-watchInput.scsSoutput.CSSTOAUTO-COMPILEONSAVE.4.WATCHENTIREFORDERSWITHSASS-WATCHSCSS: CSS.5.SUSPECTIALISWITH_PREFIXFO
Wie ?ndere ich die Textfarbe in CSS?
Jul 27, 2025 am 04:25 AM
Um die Textfarbe in CSS zu ?ndern, müssen Sie das Farbattribut verwenden. 1. Verwenden Sie das Farbattribut, um die Textvorderfarbe des Textes zu setzen und Farbnamen (z. B. rot), Hexadezimalcodes (wie #ff0000), RGB -Werte (wie RGB (255,0,0)), HSL -Werte (wie HSL (0,100%) und RGBA oder HSLA (0,100%) und RGBA oder HSLA mit Transparen (0,100%) und RGBA oder HSLA (0,100%) (255,0,0,0,0,0,0,0,0,0,0). 2. Sie k?nnen Farben auf jedes Element anwenden, das Text enth?lt, wie z. B. H1 auf H6 -Titel, Absatz P, Link A (beachten Sie die Farbeinstellungen verschiedener Zust?nde von A: Link, A: Besucht, a: hover, a: aktiv), Schaltfl?chen, Div, Span usw.; 3.. Die meisten
CSS -überg?nge Tutorial
Jul 26, 2025 am 09:30 AM
CsStransitionSenableSmoothPropertychangeswithminimalCode, idealforhovereffectSandinteractiveFeedback.1.Usethesyntaxtransition: PropertyDurationTiming-FunktionDelay;
Wie kann man ungenutzte CSS reinigen?
Jul 27, 2025 am 02:47 AM
UseAtOMatedTools -LikepurgecsSoruncsStoscanandremoveUnusedCss; 2.IntegratepurgingIntoyourbuildProcessviawebpack, vite, ortailwind ’ScontentConfiguration; 3.AuditcsSuSageWithCromedevtoolSCoveragetabbeFeforenpurgingToAvoidReperingNeedstyles; 4. Safelistdynamic
Beispiele für CSS -Filtereigenschaften
Jul 26, 2025 am 08:08 AM
ThecssFilterPropertyAppliesvisualEffectStoelementsDirektlyIncsSs, Withcommonusesincluding: 1.Blur () ForsofeningImagesorCreeatingDepth, 2.brightness () ToadjustrightnessOrdarkness, 3.Contrast () ZEENHANCEDUCREDUCEDUCTISTICTION, 4.GRAYSCALLE () und --S-LABLACHUCREDUCREDUCTIONS
Was ist ein Stapelkontext?
Jul 27, 2025 am 03:55 AM
ASTACKINGCONTEXTISASELF-ContainedLayerincsSthatControlsThez-CorderoverlapPingElements, wonach contextSrestrictz-Indexintertions;
Beschreiben Sie verschiedene CSS -Einheiten und wann Sie sie verwenden müssen
Jul 27, 2025 am 04:24 AM
In der Webentwicklung h?ngt die Auswahl der CSS -Einheiten von den Entwurfsanforderungen und der reaktionsschnellen Leistung ab. 1. Pixel (PX) werden verwendet, um Gr??en wie Grenzen und Ikonen zu reparieren, sind jedoch nicht für reaktionsschnelles Design f?rderlich. 2. Prozentsatz (%) wird gem?? dem übergeordneten Container angepasst, das zum Streaming -Layout geeignet ist, aber auf die Kontextabh?ngigkeit beachtet wird. 3.EM basiert auf der aktuellen Schriftgr??e. 4. Ansichtsfenster (VW/VH/VMIN/VMAX) werden gem?? der Bildschirmgr??e eingestellt, geeignet für Vollbild-Elemente und dynamische UI. 5. Auto-, Erben-, Anfangs- und andere Werte werden verwendet, um Stile automatisch zu berechnen, zu erben oder zurückzusetzen. Die rationale Verwendung dieser Einheiten kann die Flexibilit?t und Reaktionsf?higkeit der Seiten verbessern.
