如何用html css javascript创建包含文本的字母表形状？

Question

我想创建几个看起来像不同英文字母的形状，每个形状都应该包含文本。我有一个图像文件显示我想要做什么。我只想用html css javascript来做到这一点。我不是要教我所有的东西，而是引用不同的方法就足够了。

更多信息：内容将动态填充的形状。

Answer 1

Closest you'll get without a ridiculous answer.

这可产生许多类型的ASCII艺术。前进。疯了。

我非常怀疑有人会为你写出整个故事，但现在可以使用CSS形状来定义图像和文本之间的界限。

虽然，祝你好运。

css-shapes

Answer 2

gggggggggggggggggggg 
gggggggggggggggggggg 
ggggg   gggg 
ggggg 
ggggg 
ggggg 
ggggg  ggggggggg 
ggggg  ggggggggg 
ggggg   gggg 
ggggg   gggg 
gggggggggggggggggggg 
gggggggggggggggggggg 

的jsfiddle http://jsfiddle.net/guest271314/kd43Y/

Answer 3

棘手，但并非不可能。你可以使用CSS形状，但我不确定他们的浏览器兼容性。您可以使用图片，或者手动输入每个字母，但这不是很灵活。

虽然可能需要一段时间，但您可以将每封信都映射出来，但一旦完成后，您可以完全自定义其内容并轻松更改它们。

这是字母E！

http://jsfiddle.net/6XZkM/1/

var letter_e = [25,25,25,25,25,10,10,10,10,10,25,25,25,25,10,10,10,10,10,25,25,25,25,25]; 

var div = document.getElementById('content'); 
letter_e.forEach(function (count) { 
    for (i = 0; i < count; i++) { 
     div.innerHTML = div.innerHTML + 'e'; 
    } 
    div.innerHTML = div.innerHTML + '</br>'; 
}); 

或者个人来说，我最喜欢的：

http://jsfiddle.net/6XZkM/2/

Writing out giant letters 
with javascript is a bad 
idea! Writing out giant 
letters with javascript i 
s a bad idea! Writing out 
giant let 
ters with 
javascript 
is a bad 
idea! Writ 
ing out giant letters wit 
h javascript is a bad ide 
a! Writing out giant lett 
ers with javascript is a 
bad idea! 
Writing ou 
t giant le 
tters with 
javascrip 
t is a bad idea! Writing 
out giant letters with ja 
vascript is a bad idea! W 
riting out giant letters 
with javascript is a bad 

编辑：

我觉得无聊，所以没有一个基本版本可以处理信件中的空白。这是字母B！

http://jsfiddle.net/6XZkM/3/

本质上与此版本，当你映射每个字母，如果你只是指定一个数字，它会在一行打印出许多字母。如果你指定一个数组，它将在空格和字母之间交替。

因此，如果您定义了例如[4,20,5,13,4]，则会在一行中打印出4个字母，后面是20个空格，后面是5个字母，后面是13个空格，后面是4个字母。

我可以看到像这样处理的一个主要缺点是你必须手动绘制出你想要使用的每一个字母。它需要很多的时间。