在内容的最后一行上有一些纯文本的纯CSS多行省略号问题

时间：2019-06-18 00:51:05

标签： html css

我正在尝试实现Pure-CSS-Multiline-Ellipsis解决方案（https://github.com/ericdrowell/Pure-CSS-Multiline-Ellipsis），该解决方案仅使用CSS在文本溢出时添加省略号。当文本确实溢出时，我已经开始工作了，但是即使内容的最后一行甚至有几个字符，即使没有文本溢出，它也会添加省略号。在FF（v67.0.2（64位）），Chrome（v75.0.3770.80（正式版本）（64位））和Safari（v12.1.1）中发生这种情况：

Screen shot

（左侧文本的样式正确，因为文本大于容器，而省略号显示在右侧示例中，即使文本以“ world”结尾）

这是我的HTML（编辑后仅显示有问题的div，否则超出了3000个字符的限制）：

/*
 * Pure CSS Multi-line Ellipsis
 */

.ellipsis-container {
  overflow: hidden;
}

.ellipsis-container:before {
  content: "";
  float: left;
  width: 1px;
  height: 100%;
}

.ellipsis-wrapper {
  float: right;
  width: 100%;
  margin-left: -1px;
}

.ellipsis-content {
  margin: 0;
}

.ellipsis {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  margin-right: 1px;
  text-align: right;
}

body {
  font-family: 'Roboto', sans-serif;
}

@page {
  size: letter landscape;
}

@media print {
  @page {
    size: letter landscape;
  }
}

.printout {
  width: 100%;
  height: 824px;
}

.top_margin_text {
  text-align: center;
  font-weight: 800;
  color: red;
}

#first_div {
  width: 312px;
  height: 818px;
  float: left;
  padding: 3px;
  border: 1px solid black;
  background-image: url("https://wonderfest.com/contest/common/img/Copy_Watermark_copy_1_4_NEW copy.png");
  background-position: 75% 45%;
  background-repeat: no-repeat;
}

.first_div_bckgrnd_color {
  background-color: rgba(192, 192, 192, 0.04);
}

.scissor_left {
  width: 10px;
  height: 818px;
  float: left;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 33px;
  /*font-family: "Oxygen Mono", monospace;*/
}

.scissor_left img {
  margin-left: -10px;
}

#second_div {
  width: 312px;
  height: 818px;
  float: left;
  margin-left: 30px;
  padding: 3px;
  border: 1px solid black;
  background-image: url("https://wonderfest.com/contest/common/img/Copy_Watermark_copy_2_4_NEW copy.png");
  background-position: 75% 45%;
  background-repeat: no-repeat;
}

.second_div_bckgrnd_color {
  background-color: rgba(255, 255, 204, 0.2);
}

.scissor_right {
  width: 10px;
  height: 818px;
  float: left;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 37px;
  /*font-family: "Oxygen Mono", monospace;*/
}

.scissor_right img {
  margin-left: -10px;
}

#third_div {
  width: 312px;
  height: 818px;
  float: right;
  padding: 3px;
  border: 1px solid black;
  background-image: url("https://wonderfest.com/contest/common/img/Copy_Watermark_copy_3_4_NEW copy.png");
  background-position: 75% 45%;
  background-repeat: no-repeat;
}

.third_div_bckgrnd_color {
  background-color: rgba(255, 219, 235, 0.2);
}

.left_logo {
  float: left;
  width: 147px;
  height: 50px;
  display: inline;
}

.left_logo p {
  clear: both;
  width: 120px;
  height: 16px;
  color: white;
  border-style: solid;
  border-width: thin;
  padding: 4px;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 2px;
  margin-left: 4px;
  font-size: small;
  font-weight: 800;
  background-color: black;
}

.second_logo {
  float: left;
  width: 165px;
  height: 75px;
  display: inline;
}

.second_logo span {
  margin-left: 52px;
  font-size: small;
}

.input-fields {
  clear: both;
  width: 310px;
  margin-top: 3px;
  margin-left: 3px;
  font-size: small;
  /* This is for the labels  */
  font-weight: bold;
}


/*           .input-fields p{
                    border-radius: 3px;
                    word-wrap: break-word;
                    margin-top: 0px;
                    height: 64px;
                    width: 298px;
                    border: 1px solid black;
                    padding: 4px 4px 4px 4px;
                    font-size: 9pt;
                     font-weight: 300
                    line-height: 1.2em;
                    overflow: hidden;
                }
     */

.ellipsis-container {
  border: 1px solid black;
  border-radius: 3px;
  height: 68px;
  width: 298px;
  margin-top: 0px;
  margin-left: 3px;
  padding: 4px 4px 4px 4px;
}

.ellipsis-content {
  /* it's critical to set a fixed font-size and line-height in order for
                the ellipsis position to be predictable */
  font-size: 9pt;
  line-height: 1.2;
}

.ellipsis {
  /* set width of ellipsis */
  width: 60px;
  margin-left: -60px;
  /* set ellipsis position */
  top: -13px;
  left: 298px;
  /* add a gradient background */
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.ellipsis span {
  display: inline-block;
  font-size: 9pt;
  height: 10px;
  margin-right: 3px;
  line-height: 1.2em;
}

.input-fields input {
  width: 300px;
  border: 1px solid black;
  padding-left: 4px;
  border-radius: 3px;
  font-size: 9pt;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 400;
  background-color: transparent !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-fields textArea {
  width: 300px;
  border: 1px solid black;
  font-size: x-small;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 400;
}

.agreement {
  width: 310px;
  font-size: 5pt;
  text-align: justify;
  margin-left: 2px;
  margin-bottom: 2px;
}

.accepted_agreement {
  width: 310px;
  margin-top: 0px;
  font-size: 5pt;
  text-align: center;
}

.fold_over {
  width: 310px;
  height: 20px;
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: x-small;
  text-align: center;
  font-weight: bold;
}

.Remarks {
  width: 330px;
  height: 295px;
  margin-top: 2px;
  margin-left: 3px;
  /*font-size:small;
                    font-weight: bold;*/
}

.Remarks p {
  border-radius: 3px;
  word-wrap: break-word;
  margin-top: 0px;
  height: 265px;
  width: 298px;
  border: 1px solid black;
  font-size: 9pt;
  padding: 4px 4px 4px 4px;
  /*font-family: "Oxygen Mono", monospace;*/
  /*font-weight: 400;*/
  white-space: normal;
}

.Remarks textarea {
  width: 300px;
  height: 227px;
  border: 1px solid black;
  font-size: 9pt;
  /*font-family: "Oxygen Mono", monospace;
                    font-weight: 400;*/
}

.Paid_Watermark {
  background: url("https://wonderfest.com/contest/common/img/WF_Paid_Watermark_sm copy 3.png") no-repeat bottom right;
}

.secure_model {
  width: 310px;
  height: 22px;
  margin-top: 5px;
  font-size: xx-small;
  font-weight: bold;
  text-align: center;
}

.secure_model input {
  margin-top: 5px;
  /*font-family: "Oxygen Mono", monospace;*/
  font-size: xx-small;
  border: 1px solid black;
  background-color: LightGray !important;
  text-align: center;
}

.barcode {
  width: 310px;
  height: 32px;
  margin-top: 7px;
  font-family: "Libre Barcode 39 Extended", cursive;
  font-size: 24pt;
  text-align: center;
}

.footer_text {
  width: 310px;
  height: 25px;
  margin-top: 0px;
  font-size: small;
}

.first_footer_text {
  width: 75px;
  height: 25px;
  float: left;
  text-align: center;
}

.first_footer_text input {
  text-align: center;
  border: 1px solid black;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 500;
}

.middle_footer_text {
  width: 150px;
  height: 45px;
  text-align: center;
  float: left;
  font-weight: bold;
  background-color: LightGray !important;
  color: black !important;
}

.second_footer_text {
  width: 75px;
  height: 25px;
  float: left;
  text-align: center;
}

.second_footer_text input {
  text-align: center;
  border: 1px solid black;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 500;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Extended%7CRoboto" rel="stylesheet">


<div id="container">
  <div class="printout">

    <div id="third_div" class="entry_copy third_div_bckgrnd_color">
      <div class="left_logo">
        <img src="" width="138" height="29" alt="logo1">
        <p>Entry Form 2019</p>
      </div>
      <div class="second_logo">
        <img src="" width="168" height="62" alt="logo2">
      </div>
      <div class="input-fields">
        <label>Name:</label><br><input type="text" name="name" value="TEST TESTXXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0" readonly>
      </div>

      <div class="input-fields">
        <label>Phone:</label><br><input type="text" name="phone_num" value="5555551212XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0" readonly>
      </div>

      <div class="input-fields">
        <label>Email:</label><br><input type="text" name="email" value="a@b.comXXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0" readonly>
      </div>

      <div class="agreement">
        <p> I understand that due to the nature of the model contest, entries are sometimes handled and/or moved because of judging or space management.
          <strong>WonderFest IS NOT</strong> responsible for loss or damage to entries into the model contest. I also grant WonderFest USA, Inc., permission to photograph my model(s) and use such photos in their marketing materials without limitation
          or restriction.
        </p>
      </div>

      <div class="accepted_agreement">
        <span>Accepted agreement online: </span>
        <span>15-Jun-19 at 03:08PM EDT</span>
      </div>
      <div class="fold_over">
        <span>Fold Over</span><br><span>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</span>
      </div>

      <div class="input-fields">
        <label>Title or name of entry:</label><br>
      </div>
      <div class="ellipsis-container">
        <div class="ellipsis-wrapper">
          <p class="ellipsis-content">
            Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
          </p>

        </div>
        <span class="ellipsis" href="#showMore">
                            &hellip;
                          </span>
      </div>

      <div id="Remark3" class="Remarks">
        <label>Remarks:</label>
        <p>fsdfdsfjdsajf fklsdfjsakf jadskfjadskfjdsafj</p>
        <br>
      </div>

      <div class="input-fields">
        <label>Category:</label><br><input type="text" value="Props" readonly>
      </div>

      <div class="secure_model">
        <label>Is model secured to its base? </label><input type="text" size="3" name="secured_to_base" value="Yes" readonly><label style="margin-left:8px;">Oversized entry? </label><input type="text" size="3" name="isOversized" value="No" readonly>
      </div>

      <div class="barcode">
        <span>*2019-1098*</span>
      </div>

      <div class="footer_text">
        <div class="first_footer_text">
          <span>Entry #</span>
          <input type="text" name="entry_num" value="1098" style="width:50px;font-weight:700" readonly>
        </div>
        <div class="middle_footer_text">
          <br><span style="font-size: 8pt">MODELER'S COPY</span>
        </div>
        <div class="second_footer_text">
          <span>Table #</span>
          <input type="text" name="table_num" value="" style="width:50px;" readonly>
        </div>
      </div>
    </div>
  </div>
</div>

目标是仅在文本溢出时显示省略号-我在做什么错了？

我的背景是桌面软件，所以我只是HTML / CSS爱好者。

1 个答案:

答案 0 :(得分：2)

答案是，所包含的文本实际上比容器高 （高出4个看不见的像素），因此符合预期。

本质上，行高（而不仅仅是看到的文本）和任何其他框填充都将扩展包含的元素。要么稍微增加容器的高度，要么稍微减小内容的行高。

我对您的布局做了一些修改以显示问题。第二个块更短，没有省略号。 Console.log打印出它们的实际高度。

$(".ellipsis-container").each(function() {

  console.log( $(this).height(), "vs", $(this).find('.ellipsis-content').height() , "pixels");
});
/*
 * Pure CSS Multi-line Ellipsis
 */

.ellipsis-container {
  overflow: hidden;
}

.ellipsis-container:before {
  content: "";
  float: left;
  width: 1px;
  height: 100%;
}

.ellipsis-wrapper {
  float: right;
  width: 100%;
  margin-left: -1px;
}

.ellipsis-content {
  margin: 0;
}

.ellipsis {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  margin-right: 1px;
  text-align: right;
}

body {
  font-family: 'Roboto', sans-serif;
}

@page {
  size: letter landscape;
}

@media print {
  @page {
    size: letter landscape;
  }
}

.printout {
  width: 100%;
  height: 824px;
}

.top_margin_text {
  text-align: center;
  font-weight: 800;
  color: red;
}

#first_div {
  width: 312px;
  height: 818px;
  float: left;
  padding: 3px;
  border: 1px solid black;
  background-image: url("https://wonderfest.com/contest/common/img/Copy_Watermark_copy_1_4_NEW copy.png");
  background-position: 75% 45%;
  background-repeat: no-repeat;
}

.first_div_bckgrnd_color {
  background-color: rgba(192, 192, 192, 0.04);
}

.scissor_left {
  width: 10px;
  height: 818px;
  float: left;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 33px;
  /*font-family: "Oxygen Mono", monospace;*/
}

.scissor_left img {
  margin-left: -10px;
}

#second_div {
  width: 312px;
  height: 818px;
  float: left;
  margin-left: 30px;
  padding: 3px;
  border: 1px solid black;
  background-image: url("https://wonderfest.com/contest/common/img/Copy_Watermark_copy_2_4_NEW copy.png");
  background-position: 75% 45%;
  background-repeat: no-repeat;
}

.second_div_bckgrnd_color {
  background-color: rgba(255, 255, 204, 0.2);
}

.scissor_right {
  width: 10px;
  height: 818px;
  float: left;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 37px;
  /*font-family: "Oxygen Mono", monospace;*/
}

.scissor_right img {
  margin-left: -10px;
}

#third_div {
  width: 312px;
  height: 818px;
  float: right;
  padding: 3px;
  border: 1px solid black;
  background-image: url("https://wonderfest.com/contest/common/img/Copy_Watermark_copy_3_4_NEW copy.png");
  background-position: 75% 45%;
  background-repeat: no-repeat;
}

.third_div_bckgrnd_color {
  background-color: rgba(255, 219, 235, 0.2);
}

.left_logo {
  float: left;
  width: 147px;
  height: 50px;
  display: inline;
}

.left_logo p {
  clear: both;
  width: 120px;
  height: 16px;
  color: white;
  border-style: solid;
  border-width: thin;
  padding: 4px;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 2px;
  margin-left: 4px;
  font-size: small;
  font-weight: 800;
  background-color: black;
}

.second_logo {
  float: left;
  width: 165px;
  height: 75px;
  display: inline;
}

.second_logo span {
  margin-left: 52px;
  font-size: small;
}

.input-fields {
  clear: both;
  width: 310px;
  margin-top: 3px;
  margin-left: 3px;
  font-size: small;
  /* This is for the labels  */
  font-weight: bold;
}


/*           .input-fields p{
                    border-radius: 3px;
                    word-wrap: break-word;
                    margin-top: 0px;
                    height: 64px;
                    width: 298px;
                    border: 1px solid black;
                    padding: 4px 4px 4px 4px;
                    font-size: 9pt;
                     font-weight: 300
                    line-height: 1.2em;
                    overflow: hidden;
                }
     */

.ellipsis-container {
  border: 1px solid black;
  border-radius: 3px;
  height: 68px;
  width: 298px;
  margin-top: 0px;
  margin-left: 3px;
  padding: 4px 4px 4px 4px;
}

.ellipsis-content {
  /* it's critical to set a fixed font-size and line-height in order for
                the ellipsis position to be predictable */
  font-size: 9pt;
  line-height: 1.2;
}

.ellipsis {
  /* set width of ellipsis */
  width: 60px;
  margin-left: -60px;
  /* set ellipsis position */
  top: -13px;
  left: 298px;
  /* add a gradient background */
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.ellipsis span {
  display: inline-block;
  font-size: 9pt;
  height: 10px;
  margin-right: 3px;
  line-height: 1.2em;
}

.input-fields input {
  width: 300px;
  border: 1px solid black;
  padding-left: 4px;
  border-radius: 3px;
  font-size: 9pt;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 400;
  background-color: transparent !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-fields textArea {
  width: 300px;
  border: 1px solid black;
  font-size: x-small;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 400;
}

.agreement {
  width: 310px;
  font-size: 5pt;
  text-align: justify;
  margin-left: 2px;
  margin-bottom: 2px;
}

.accepted_agreement {
  width: 310px;
  margin-top: 0px;
  font-size: 5pt;
  text-align: center;
}

.fold_over {
  width: 310px;
  height: 20px;
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: x-small;
  text-align: center;
  font-weight: bold;
}

.Remarks {
  width: 330px;
  height: 295px;
  margin-top: 2px;
  margin-left: 3px;
  /*font-size:small;
                    font-weight: bold;*/
}

.Remarks p {
  border-radius: 3px;
  word-wrap: break-word;
  margin-top: 0px;
  height: 265px;
  width: 298px;
  border: 1px solid black;
  font-size: 9pt;
  padding: 4px 4px 4px 4px;
  /*font-family: "Oxygen Mono", monospace;*/
  /*font-weight: 400;*/
  white-space: normal;
}

.Remarks textarea {
  width: 300px;
  height: 227px;
  border: 1px solid black;
  font-size: 9pt;
  /*font-family: "Oxygen Mono", monospace;
                    font-weight: 400;*/
}

.Paid_Watermark {
  background: url("https://wonderfest.com/contest/common/img/WF_Paid_Watermark_sm copy 3.png") no-repeat bottom right;
}

.secure_model {
  width: 310px;
  height: 22px;
  margin-top: 5px;
  font-size: xx-small;
  font-weight: bold;
  text-align: center;
}

.secure_model input {
  margin-top: 5px;
  /*font-family: "Oxygen Mono", monospace;*/
  font-size: xx-small;
  border: 1px solid black;
  background-color: LightGray !important;
  text-align: center;
}

.barcode {
  width: 310px;
  height: 32px;
  margin-top: 7px;
  font-family: "Libre Barcode 39 Extended", cursive;
  font-size: 24pt;
  text-align: center;
}

.footer_text {
  width: 310px;
  height: 25px;
  margin-top: 0px;
  font-size: small;
}

.first_footer_text {
  width: 75px;
  height: 25px;
  float: left;
  text-align: center;
}

.first_footer_text input {
  text-align: center;
  border: 1px solid black;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 500;
}

.middle_footer_text {
  width: 150px;
  height: 45px;
  text-align: center;
  float: left;
  font-weight: bold;
  background-color: LightGray !important;
  color: black !important;
}

.second_footer_text {
  width: 75px;
  height: 25px;
  float: left;
  text-align: center;
}

.second_footer_text input {
  text-align: center;
  border: 1px solid black;
  /*font-family: "Oxygen Mono", monospace;*/
  font-weight: 500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Extended%7CRoboto" rel="stylesheet">


<div id="container">
  <div class="printout">

    <div id="third_div" class="entry_copy third_div_bckgrnd_color">
      <div class="left_logo">
        <img src="" width="138" height="29" alt="logo1">
        <p>Entry Form 2019</p>
      </div>
      <div class="second_logo">
        <img src="" width="168" height="62" alt="logo2">
      </div>
      <div class="input-fields">
        <label>Name:</label><br><input type="text" name="name" value="TEST TESTXXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0" readonly>
      </div>

      <div class="input-fields">
        <label>Phone:</label><br><input type="text" name="phone_num" value="5555551212XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0" readonly>
      </div>

      <div class="input-fields">
        <label>Email:</label><br><input type="text" name="email" value="a@b.comXXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0XXXXXXXXX0" readonly>
      </div>

      <div class="agreement">
        <p> I understand that due to the nature of the model contest, entries are sometimes handled and/or moved because of judging or space management.
          <strong>WonderFest IS NOT</strong> responsible for loss or damage to entries into the model contest. I also grant WonderFest USA, Inc., permission to photograph my model(s) and use such photos in their marketing materials without limitation
          or restriction.
        </p>
      </div>

      <div class="accepted_agreement">
        <span>Accepted agreement online: </span>
        <span>15-Jun-19 at 03:08PM EDT</span>
      </div>
      <div class="fold_over">
        <span>Fold Over</span><br><span>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</span>
      </div>

      <div class="input-fields">
        <label>Title or name of entry:</label><br>
      </div>
      <div class="ellipsis-container">
        <div class="ellipsis-wrapper">
          <p class="ellipsis-content">
            Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
          </p>

        </div>
        <span class="ellipsis" href="#showMore">
                            &hellip;
                          </span>
      </div>

      <div class="ellipsis-container">
        <div class="ellipsis-wrapper">
          <p class="ellipsis-content">
            Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little [end].
          </p>

        </div>
        <span class="ellipsis" href="#showMore">
                            &hellip;
                          </span>
      </div>

      <div class="input-fields">
        <label>Category:</label><br><input type="text" value="Props" readonly>
      </div>

      <div class="secure_model">
        <label>Is model secured to its base? </label><input type="text" size="3" name="secured_to_base" value="Yes" readonly><label style="margin-left:8px;">Oversized entry? </label><input type="text" size="3" name="isOversized" value="No" readonly>
      </div>

      <div class="barcode">
        <span>*2019-1098*</span>
      </div>

      <div class="footer_text">
        <div class="first_footer_text">
          <span>Entry #</span>
          <input type="text" name="entry_num" value="1098" style="width:50px;font-weight:700" readonly>
        </div>
        <div class="middle_footer_text">
          <br><span style="font-size: 8pt">MODELER'S COPY</span>
        </div>
        <div class="second_footer_text">
          <span>Table #</span>
          <input type="text" name="table_num" value="" style="width:50px;" readonly>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题