Page Widget How to - Clip text by width

Question

We would like to know how to clip text by width.

Answer


<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
      section {<!--   w w w  .j a va 2s  .c  om-->
        display: block;
        border: 1px dashed silver;
        width:  35em;
        margin-bottom: 1em;
        padding: 0 1em;
        border-radius: 0.5em;
        background-color: rgb(234, 237, 237);
        box-shadow: 1px 1px 2px silver inset;
      }
      section p {
        white-space: nowrap;
        overflow: hidden;
      }
      #ellipsis-multiline {
        margin-bottom: 3em;
      }
      #clip p {
        text-overflow: clip;
      }
      #ellipsis p {
        text-overflow: ellipsis;
      }
      #ellipsis-multiline p {
        white-space: normal;
        height: 3em;
        text-overflow: -o-ellipsis-lastline;
      }
  </style>
</head>
<body>
    <section id="clip">
    <p>This text will be clipped.
    This text will be clipped. This text will be clipped.
    This text will be clipped. This text will be clipped.
    This text will be clipped. This text will be clipped.
    </p>
  </section>
</body>
</html>

The code above is rendered as follows: