Сколько пикселей равен пробелу?

Question

Это мой код:

<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
        <div contenteditable=true>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            aaaaa
            bbbbbbbbbbb
        </div>
</div>

Я хочу заполнить все пространство в div.

Сколько пикселей составляет  ?

Answer 1

Вы можете создать <div>, содержащий  , и назначить id.Установите размер шрифта и атрибуты.Затем прочитайте текущую ширину и высоту, используя:

var space=document.getElementById("space");
var height=(space.clientHeight+1)+"px";
var width=(space.clientWidth+1)+"px";

Answer 2

Это зависит от размера шрифта, потому что   - это пробел.

Answer 3

Это зависит от шрифта, размера и т. Д. Нет прямого уравнения / числа для пробелов в пикселях.

Answer 4

"em" (ширина 1 символ) часто считается 16 x 16 пикселей.Конечно, если зритель изменяет размер текста, это изменится.

Я не уверен, что вы пытаетесь сделать, но если вы просто хотите, чтобы над вашим текстом было пустое место, вы могли бы поставить другой div (длятекст) внутри вашего div, а затем установите «margin-top: 10em;» (или столько ems, сколько вы хотите), чтобы обеспечить пробел.

Answer 5

Вы можете использовать «em» вместо «px».Первая поисковая ссылка о «em»: http://www.xs4all.nl/~sbpoley/webmatters/emex.html

Попробуйте такую ​​конструкцию

<div style="position:absolute;top:300px;width:{count_of_letters}em; height:50px;background:red;color:black;word-wrap:break-word;">
    <div contenteditable=true>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        aaaaa
        bbbbbbbbbbb
    </div>

Но лучше забыть эту идею и использовать правила CSS из других комментариев в этомтема.

Answer 6

Ответ будет зависеть от используемого вами шрифта и стилей, которые ему были заданы.Так что вам нужно будет рассчитать его динамически на странице.

Используйте Javascript для создания div, который отображается вне страницы (т.е. слева: -4000px;}, который содержит один символ. Убедитесь, что этот элемент имееттот же стиль текста, что и для вашего элемента contentEditable. Ширина этого элемента должна соответствовать ширине пробела (убедитесь, что вы не используете отступы или границы и т. д.)

Я не пробовал этого,но это то, что я попробую в первую очередь.

Answer 7

Невозможно честно ответить на этот вопрос, так как размер одного пробела изменяется в зависимости от размера шрифта.

Попробуйте, изменив «30px» на все, что вы хотите.