在不更改标记的情况下创建dymo磁带文本效果？

Question

所以假设我有一个带有文本的段落元素：

<p>Something something something</p>

我必须执行哪些CSS巫术才能让我的文字看起来像这样？

鉴于我正在从CMS中提取内容，我不得不做一些解决方案似乎比实现这种效果更麻烦。我可以用什么方法来实现这个目标？

修改：Here is an example that uses manual line breaks at the end of every span to achieve this effect

我无法使用此功能，因为我不知道何时应该断行，因为所有文本都是从CMS中提取的

Answer 1

我认为我非常接近。 （http://jsfiddle.net/8vUJ2/）

HTML：

<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nunc ipsum, sed aliquam tortor adipiscing non. Vivamus vitae egestas ipsum. Integer sed congue elit, eu blandit nulla. Pellentesque fermentum turpis ante, id fringilla lectus posuere quis. Ut scelerisque non erat non congue. Suspendisse non semper lorem. Suspendisse potenti. Fusce molestie nec erat at cursus. Integer imperdiet tellus quis lacus dapibus egestas. Curabitur massa mi, vulputate quis augue vitae, accumsan tincidunt massa. Ut quis vestibulum turpis, eu ultricies ligula. Sed sed interdum odio. Quisque tristique lobortis dolor, id ornare nisi adipiscing faucibus. Sed fermentum dolor faucibus felis vulputate, et bibendum libero porta.</span></div>

CSS：

span {
    border-top:1px solid #6c5c5d;
    padding:7px 0 9px;
    line-height:34px;
    font-size:15px;
    background: linear-gradient(to bottom, #31221f, #030000);
    color:#c3bcb6;
    font-family:sans-serif;
    text-shadow:
        -1px -1px 0 #030000,  
        1px -1px 0 #030000,
        -1px 1px 0 #030000,
        1px 1px 0 #030000,
        0 0 4px #fff;
    letter-spacing:3px;
    text-transform:uppercase;
    font-family:courier;
    font-weight:bold;
}

div{
    padding-left:20px;
    background:url(http://i62.tinypic.com/nn8s41.png) 0 0 repeat-y;
}

我使用了一张图片：

左边的

使线条开始变化，我不得不使用css背景渐变，所以旧浏览器的支持不会太好，但对于纯css解决方案，我认为它有效。我还使用text-shadow来解释您在所发布图像中可以看到的近似轮廓效果的字体。

Answer 2

这样的事情怎么样？

p{
    background: black;
    color:white;
    display:inline;
    font-family: courier;
    padding:3px;
    line-height:2em; 
    text-transform: uppercase;
}

http://jsfiddle.net/MHT63/3/