我想知道是否有人知道可以处理在自定义形状中包装文本的库?
我试图为朋友网站建立一个模块,用于处理珠宝雕刻。该模块需要能够实时预览客户他们的文本在产品上的样子。
由于首饰有不同的形状和大小,我需要一种方法将输入的文字包裹在不同的自定义形状内,如下图所示。
我已经用JavaScript编写了一个原型大部分工作原型,但它的边缘非常粗糙,我希望有更多经过试验和测试的方法来代替
我需要在尽可能多的浏览器上完成这项工作。 任何帮助将不胜感激!
答案 0 :(得分:1)
可以在没有JavaScript的情况下实现此效果,基本上通过使用CSS shape-outside
属性,如评论中已经提到的那样。
重要元素显示在下图中(我的网络检查员的屏幕截图):
您创建一个.wrapper
元素,其中包含一个SVG元素,两个形状元素和一个文本段落。根据您的形状,您可以将SVG元素置于绝对位置,并使其比文本段落低z-index
。
由于shape-outside
属性与float
相结合,文本换行本身是可能的。一种可能的解决方案是创建元素,给它们一个与SVG形状非常匹配的外部形状,让它们向左和向右浮动,例如文本介于两者之间并包裹在两侧。
overflow: hidden;
)。甚至在提出这个问题一年之后,browser support for shape-outside
也不是那么好。但您可以使用相应的供应商前缀(例如-webkit-shape-outside
)。 SVG is well supported现在。
.wrapper {
position: relative;
width: 400px;
height: 300px;
padding-top: 50px;
}
.background {
position: absolute;
z-index: 0;
top: -65px;
left: 28px;
transform: rotate(-45deg);
width: 90%;
}
p {
position: relative;
z-index: 1;
text-align: justify;
font-size: 1.6em;
font-family: Helvetica, Arial;
margin: 0;
}
.shape {
width: 50%;
height: 100%;
}
.left {
shape-outside: polygon(0 0, 0 100%, 100% 100%, 100% 95%, 20% 40%, 10% 20%, 20% 0);
float: left;
}
.right {
shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 95%, 80% 40%, 90% 20%, 80% 0);
float: right;
}
<div class="wrapper">
<svg class="background" viewbox="-1 -1 95 95">
<path d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0z" fill="#daeef3" stroke="black" stroke-width="2" />
</svg>
<div class="shape left"></div>
<div class="shape right"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperi ores. Lorem ipsum dolor sit am</p>
</div>