CSS 将显示不完的多余字符用省略号代替兼容各主要浏览器 IE6+、FF、Chrom

100%

CSS 将显示不完的多余字符用省略号代替兼容各主要浏览器 IE6+、FF、Chrom

✓ Published0🌍 Public

Last edited Feb 18, 2014

Created on May 18, 2016

This example demonstrates CSS techniques for truncating overflowing text with ellipses in both single-line and multi-line layouts. The single-line method applies the `text-overflow: ellipsis` property alongside vendor-prefixed versions (`-o-text-overflow`, `-moz-text-overflow`, `-webkit-text-overflow`) and requires `white-space: nowrap` and `overflow: hidden`. For multi-line text, the approach simulates ellipsis by positioning a child `<div>` containing "..." absolutely at the bottom-right corner over a relative-positioned container with `overflow: hidden`. The code uses only standard HTML and CSS, with no external libraries or data sources.

AI-generated description

Similar vizzes

Loading thumbnail…

css: clearfix

This example demonstrates a CSS technique for containing floated child elements within a parent container, using a clearfix pattern. It shows a `:after` pseudo-element on the `.group` class that generates empty content, sets the element to `display: table`, and applies `clear: both` to force the parent to expand and include its floated children. The code relies on the CSS `content` property and the `display` and `clear` properties, with no external libraries or JavaScript. This approach is applied directly to a class selector, ensuring the parent wraps around its content without needing extra markup.

BBraMKJ

59% match

Loading thumbnail…

Hyphenation

This example demonstrates how CSS hyphenation automatically breaks a long quotation to fit a narrow text column, creating a justified, evenly spaced block of text. The HTML contains a single sentence from Oscar Wilde, while the CSS sets a fixed width, serif typography, and text justification. The `hyphens: auto` property, combined with the `lang` attribute implied by the content, enables automatic hyphenation. The JavaScript file only contains a commented-out alert, so no interactive behavior occurs. The dabblet is styled using standard CSS without external libraries.

AAlexZ33

58% match

Loading thumbnail…

CSS Columns

This example demonstrates text content arranged in multiple columns using CSS multi-column layout. The page shows a series of paragraphs flowing across four columns defined with the `columns: 4 250px` property, with a three-pixel solid column rule and a three-rem gap separating them. One quote is styled with a larger font, centered text, and a `column-span: all` property to break across all columns, while the author attribution uses `white-space: nowrap` to prevent line breaks. The code relies on the standard CSS Multi-column Layout module and the Roboto font loaded from Google Fonts.

WWRCIECH

58% match

Loading thumbnail…

0413..2

This example demonstrates three different ways to apply Cascading Style Sheets (CSS) to an HTML document: inline, internal, and external styling. The page displays three lines of text, each using a distinct method: the first uses an inline style attribute, the second uses an internal `<style>` block, and the third applies an external stylesheet. The code uses standard HTML elements and plain CSS, with no JavaScript libraries or frameworks involved, highlighting the fundamental syntax and precedence of CSS styling approaches.

KKim-Mingyeong

56% match

Loading thumbnail…

CSS Floats

This example demonstrates how CSS floats affect the layout of text and block elements within an HTML document. It uses standard HTML elements and the CSS properties `float`, `margin`, and `display: flow-root` to create left- and right-floating black squares that wrap surrounding paragraph text. The page pulls the Roboto font from Google Fonts via `@import` and applies it to the body, while the `section` element showcases `flow-root` to contain nested floats. No JavaScript or external visualization libraries are used; the effect relies entirely on core CSS.

WWRCIECH

55% match

Loading thumbnail…

CSS Display

This example contrasts default block-level paragraph styling with an inline-block span by using the CSS `display` property. The page shows how inline-block elements respect vertical margins and padding, while the surrounding paragraphs remain gray blocks. Rendering relies on HTML structure and the linked Roboto font from Google Fonts, with all visual behavior defined in the included stylesheet. No JavaScript or external visualization libraries are used; the example is purely static.

WWRCIECH

55% match

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on a plain white page. It demonstrates the simplest possible web page structure using a minimal HTML document with embedded CSS styling. The code relies on standard HTML tags and a CSS rule that sets the body font size to 13em and applies text alignment. No JavaScript libraries or external data sources are involved, making it a static, bare-bones starting point for web and visualization projects.

Lluojiandan

55% match

Loading thumbnail…

Gist de30f3fbfcf277da051e

This example demonstrates a text-balancing technique that adjusts the spacing of words within a paragraph to create a visually even, block-like layout. It shows how justified text can be manipulated so that each line fills the container width more uniformly, improving the appearance of dense typographic blocks. The code relies on the jQuery library and a custom `smartresize` event handler to recalculate text wrapping on window resize. It also implements a debouncing function to limit the frequency of resize-triggered updates, ensuring smooth performance during interactive adjustments. The underlying logic inspects the element’s computed text-align property to conditionally apply justification, while preserving the original DOM structure through careful tag and span manipulation.

CCindyJonesHulfachor

55% match