文本域实现文字环绕的效果

估计你看到这个标题是懵逼的,直接上图吧!

下面那个 “退订***”那个位置好实现,可是上面那个“【签名】”的文字环绕效果要怎么实现呢?一开始想的是浮动,但是文本域不像单纯的文本,无法实现这种文字环绕,该方案PASS。后面想着单纯用绝对定位,发现遇到的问题跟浮动是一样的,该方案PASS。后面一想,这个样子不就是所谓的首行缩进吗?直接用text-indent不就好了?!

主要布局如下:

主要css代码如下:

因为“【签名】”那里是变量,所以文本域的text-indext值是不一定的。考虑到这是个弹层,默认是隐藏的,“【签名】”里面内容的宽度需要在弹层显示后才能获取到,JS代码如下:

//messageTemplateAddModal是弹层的ID
$('#messageTemplateAddModal').on('shown.bs.modal', function () {
var tipsWidth = $(".sign-txt-area .tips").width();
$(".js_sign_area").css("text-indent",tipsWidth+"px");
});

 

遇到问题的时候不要被自己的思维给局限了。

原文地址:https://www.cnblogs.com/sese/p/8781769.html