Html codes for display name

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div ( 
Я - невидим!
 ) Стоит внутри скобок
 

Значение block

• Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
• Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

• Элементы располагаются на той же строке, последовательно.
• Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
 

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Во всём остальном – это блок, то есть:

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой
 

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.
 
Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
 

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Источник

Intl.DisplayNames

The Intl.DisplayNames object enables the consistent translation of language, region and script display names.

Try it

Constructor

Creates a new Intl.DisplayNames object.

Static methods

Returns an array containing those of the provided locales that are supported without having to fall back to the runtime’s default locale.

Instance properties

These properties are defined on Intl.DisplayNames.prototype and shared by all Intl.DisplayNames instances.

The constructor function that created the instance object. For Intl.DisplayNames instances, the initial value is the Intl.DisplayNames constructor.

The initial value of the @@toStringTag property is the string «Intl.DisplayNames» . This property is used in Object.prototype.toString() .

Instance methods

This method receives a code and returns a string based on the locale and options provided when instantiating Intl.DisplayNames .

Returns a new object with properties reflecting the locale and formatting options computed during initialization of the object.

Examples

Region Code Display Names

To create an Intl.DisplayNames for a locale and get the display name for a region code.

// Get display names of region in English let regionNames = new Intl.DisplayNames(["en"],  type: "region" >); regionNames.of("419"); // "Latin America" regionNames.of("BZ"); // "Belize" regionNames.of("US"); // "United States" regionNames.of("BA"); // "Bosnia & Herzegovina" regionNames.of("MM"); // "Myanmar (Burma)" // Get display names of region in Traditional Chinese regionNames = new Intl.DisplayNames(["zh-Hant"],  type: "region" >); regionNames.of("419"); // "拉丁美洲" regionNames.of("BZ"); // "貝里斯" regionNames.of("US"); // "美國" regionNames.of("BA"); // "波士尼亞與赫塞哥維納" regionNames.of("MM"); // "緬甸" 

Language Display Names

To create an Intl.DisplayNames for a locale and get the display name for a language-script-region sequence.

// Get display names of language in English let languageNames = new Intl.DisplayNames(["en"],  type: "language" >); languageNames.of("fr"); // "French" languageNames.of("de"); // "German" languageNames.of("fr-CA"); // "Canadian French" languageNames.of("zh-Hant"); // "Traditional Chinese" languageNames.of("en-US"); // "American English" languageNames.of("zh-TW"); // "Chinese (Taiwan)"] // Get display names of language in Traditional Chinese languageNames = new Intl.DisplayNames(["zh-Hant"],  type: "language" >); languageNames.of("fr"); // "法文" languageNames.of("zh"); // "中文" languageNames.of("de"); // "德文" 

Script Code Display Names

To create an Intl.DisplayNames for a locale and get the display name for a script code.

// Get display names of script in English let scriptNames = new Intl.DisplayNames(["en"],  type: "script" >); // Get script names scriptNames.of("Latn"); // "Latin" scriptNames.of("Arab"); // "Arabic" scriptNames.of("Kana"); // "Katakana" // Get display names of script in Traditional Chinese scriptNames = new Intl.DisplayNames(["zh-Hant"],  type: "script" >); scriptNames.of("Latn"); // "拉丁文" scriptNames.of("Arab"); // "阿拉伯文" scriptNames.of("Kana"); // "片假名" 

Currency Code Display Names

To create an Intl.DisplayNames for a locale and get the display name for currency code.

// Get display names of currency code in English let currencyNames = new Intl.DisplayNames(["en"],  type: "currency" >); // Get currency names currencyNames.of("USD"); // "US Dollar" currencyNames.of("EUR"); // "Euro" currencyNames.of("TWD"); // "New Taiwan Dollar" currencyNames.of("CNY"); // "Chinese Yuan" // Get display names of currency code in Traditional Chinese currencyNames = new Intl.DisplayNames(["zh-Hant"],  type: "currency" >); currencyNames.of("USD"); // "美元" currencyNames.of("EUR"); // "歐元" currencyNames.of("TWD"); // "新台幣" currencyNames.of("CNY"); // "人民幣" 

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

Function: displayName

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The optional displayName property of a Function instance specifies the display name of the function.

Value

The displayName property is not initially present on any function — it’s added by the code authors. For the purpose of display, it should be a string.

Description

The displayName property, if present, may be preferred by consoles and profilers over the name property to be displayed as the name of a function.

Among browsers, only the Firefox console utilizes this property. React devtools also use the displayName property when displaying the component tree.

Firefox does some basic attempts to decode the displayName that’s possibly generated by the anonymous JavaScript functions naming convention algorithm. The following patterns are detected:

• If displayName ends with a sequence of alphanumeric characters, _ , and $ , the longest such suffix is displayed.
• If displayName ends with a sequence of [] -enclosed characters, that sequence is displayed without the square brackets.
• If displayName ends with a sequence of alphanumeric characters and _ followed by some / , . , or < , the sequence is returned without the trailing / , . , or < characters.
• If displayName ends with a sequence of alphanumeric characters and _ followed by (^) , the sequence is displayed without the (^) .

If none of the above patterns match, the entire displayName is displayed.

Examples

Setting a displayName

By entering the following in a Firefox console, it should display as something like function MyFunction() :

const a = function () >; a.displayName = "MyFunction"; a; // function MyFunction() 

Changing displayName dynamically

You can dynamically change the displayName of a function:

const object =  // anonymous someMethod: function someMethod(value)  someMethod.displayName = `someMethod ($value>)`; >, >; console.log(object.someMethod.displayName); // undefined object.someMethod("123"); console.log(object.someMethod.displayName); // "someMethod (123)" 

Cleaning of displayName

Firefox devtools would clean up a few common patterns in the displayName property before displaying it.

function foo() > function testName(name)  foo.displayName = name; console.log(foo); > testName("$foo$"); // function $foo$() testName("foo bar"); // function bar() testName("Foo.prototype.add"); // function add() testName("foo ."); // function foo .() testName("foo ); // function foo testName("foo?"); // function foo?() testName("foo()"); // function foo()() testName("[. ]"); // function . () testName("foo); // function foo() testName("foo. "); // function foo() testName("foo(^)"); // function foo() 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник