Display: inline с полем, заполнением, шириной, высотой

Ответ 1

Пожалуйста, см. " Контексты форматирования текста" в спецификации CSS для полного объяснения.

В основном поле, заполнение и граница могут быть установлены на элементах на уровне строки, но они могут не вести себя так, как вы ожидаете. Поведение, вероятно, будет ОК, если есть только одна строка, но другие строки в одном потоке, скорее всего, будут отличаться от ваших ожиданий (т.е. Заполнение не будет соблюдаться). Кроме того, ваш встроенный ящик можно сломать, если он содержит разбитые элементы и достигает поля содержащего элемент; в этом случае, в точке разрыва, поля и отступы также не будут соблюдаться.

Нашел хороший пример из списка: http://www.maxdesign.com.au/articles/inline/

Ответ 2

Заполнение будет работать для inline. Высота и ширина не будут.

http://jsfiddle.net/d89Wd/

Edit: исправлен

Ответ 3

Я знаю, что это довольно поздний ответ, но я написал плагин jQuery, который поддерживает дополнение к встроенным элементам (со сломанием), см. этот JSfiddle:

http://jsfiddle.net/RxKek/

Код плагина:

$.fn.outerHTML = function () {
// IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
return (!this.length) ? this : (this[0].outerHTML || (
    function (el) {
        var div = document.createElement('div');
        div.appendChild(el.cloneNode(true));
        var contents = div.innerHTML;
        div = null;
        return contents;
    })(this[0]));
};

/*
Requirements:

1. The container must NOT have a width!
2. The element needs to be formatted like this:

<div>text</div>

in stead of this:

<div>
    text
</div>
*/

$.fn.fixInlineText = function (opt) {
return this.each(function () {
    //First get the container width
    var maxWidth = opt.width;

    //Then get the width of the inline element
    //To calculate the correct width the element needs to 
    //be 100% visible that why we make it absolute first.
    //We also do this to the container.
    $(this).css("position", "absolute");
    $(this).parent().css("position", "absolute").css("width", "200%");

    var width = $(this).width();

    $(this).css("position", "");
    $(this).parent().css("position", "").css("width", "");

    //Don't do anything if it fits
    if (width < maxWidth) {
        return;
    }

    //Check how many times the container fits within the box
    var times = Math.ceil(width / maxWidth);

    //Function for cleaning chunks
    var cleanChunk = function (chunk) {
        var thisChunkLength = chunk.length - 1;

        if (chunk[0] == " ") chunk = chunk.substring(1);
        if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength);

        return chunk;
    };

    //Divide the text into chunks
    var text = $(this).html();
    var textArr = text.split(" ");

    var chunkLength = Math.ceil((textArr.length - 1) / times);
    var chunks = [];

    var curChunk = "";
    var curChunkCount = 0;

    var isParsingHtml = false;

    //Loop through the text array and split it into chunks
    for (var i in textArr) {
        //When we are parsing HTML we don't want to count the
        //spaces since the user doesn't see it.
        if (isParsingHtml) {
            //Check for a HTML end tag
            if (/<\/[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) {
                isParsingHtml = false;
            }
        } else {
            //Check for a HTML begin tag
            if (/<[a-zA-Z]*/.test(textArr[i])) {
                isParsingHtml = true;
            }
        }

        //Calculate chunks
        if (curChunkCount == (chunkLength - 1) && !isParsingHtml) {
            curChunk += textArr[i] + " ";
            chunks.push(cleanChunk(curChunk));
            curChunk = "";
            curChunkCount = -1;
        } else if ((i == (textArr.length - 1))) {
            curChunk += textArr[i];
            chunks.push(cleanChunk(curChunk));
            break;
        } else {
            curChunk += textArr[i] + " ";
        }

        if (!isParsingHtml) {
            curChunkCount++;
        }
    }

    //Convert chunks to new elements
    var el = $($(this).html("").outerHTML());

    for (var x in chunks) {
        var new_el = el.clone().html(chunks[x]).addClass("text-render-el");
        var new_el_container = $("<div/>").addClass("text-render-container");

        new_el_container.append(new_el);

        $(this).before(new_el_container);
    }

    //Finally remove the current element
    $(this).remove();
});
};