Question

我想在多行文本块下面创建一条直到该块中最长文本行长度的行。我希望实现这样的目标：

`Lorem Ipsum, Lorem Ipsum,
 Lorem Ipsum
 =========================----------------`

示例到目前为止我做了什么 http://jsfiddle.net/VHdyf/82/

Answer 1

如果你愿意使用jQuery，你可以......

获取span
附加该宽度的hr
根据需要设置hr的样式

fiddle

＆＃13;

$(function() {

  $('span').each(function() {
    var w = $(this).width();
    var l = $('<hr />');

    l.css("width", w);
    $(this).append(l);
  });
});

＆＃13;

span {
  position: relative;
  display: inline;
  padding-bottom: 2px;
}

hr {
  width: 50px;
  margin-left: 0;
  border: 2px solid #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, </span>
</div>

<br/>
<br/>
<div>
  <span>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, LoremIpsumLoremIpsumLoremIpsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, </span>
</div>

<br/>
<br/>
<div style="display:block;width:300px;">
  <span>Lorem Ipsum, Lorem Ipsum, LoremhkjhkasdasdffasfasfasfjhjkIpsum, </span>
</div>

＆＃13;

Answer 2

这实现了您所说的目标：

＆＃13;

  <p>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum<br/>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum Lorem Ipsum, Lorem Ipsum, Lorem Ipsum<br/>Lorem Ipsum, Lorem Ipsum, Lorem Ipsum</p>

＆＃13;

{
  "all_cart_products": [
    {
      "seller_id": "3",
      "seller_name": "Avik Roy",
      "email": "nits.avik@gmail.com",
      "seller_image": "http://104.131.83.218/makeoffer/upload/userimage/1491225073_ajeet_1000016806.jpg",
      "products": [
        {
          "id": "7",
          "product_user_id": "3",
          "name": "rtutyikuyliou",
          "desc": "Ytuykloiu sadfvdsbhdf fvdn dfjntgfkmhygdd dfsdhbgdf asfsedgdrjn sfvdsbhdf sfaswg adaswfg ADXAV adcasvfs adaswfsde safds",
          "quantity": "1",
          "unit_price": "100.00",
          "total_price1": 100,
          "total_price": "100.00",
          "itemImage": "http://104.131.83.218/makeoffer/upload/product/1489739799Manab.jpg",
          "totalquantity": "48"
        },
        {
          "id": "1",
          "product_user_id": "3",
          "name": "product1",
          "desc": "Ewfdewfs dvdfsovdfjudf bvdfofidksopdfb dfbldfjbldfb fdbdfkljbdfb dfbfkdjbdfb dfbdfjklbdfb dfbldfjkdf bdflkbjdfbdf bdfkljbdfb dfbldfkjbdf bdfbldfjkbdf bdfklbjdfdf bdfbjdflbdf bdf",
          "quantity": "1",
          "unit_price": "200.00",
          "total_price1": 200,
          "total_price": "200.00",
          "itemImage": "http://104.131.83.218/makeoffer/upload/product/1489737382Manab.jpg",
          "totalquantity": "50"
        }
      ]
    },
    {
      "seller_id": "11",
      "seller_name": "Kartik  roy",
      "email": "nits.kartik@gmail.com",
      "seller_image": "http://104.131.83.218/makeoffer/upload/userimage/14902548541490254849295.jpg",
      "products": [
        {
          "id": "12",
          "product_user_id": "11",
          "name": "Titli ghh\n",
          "desc": "uh ghd Ff hg hi JJ jf TD ghh",
          "quantity": "1",
          "unit_price": "10.00",
          "total_price1": 10,
          "total_price": "10.00",
          "itemImage": "http://104.131.83.218/makeoffer/upload/product/1490254269myprod.jpg",
          "totalquantity": "5"
        }
      ]
    }
  ],
  "total_qty": 1,
  "Ack": 1
}

＆＃13;

文字下划线为全文

2 个答案: