html 自动截断,HTML5 文本截断实例

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

background-color: #556;

background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(300deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(300deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);

background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);

background-size: 80px 140px;

background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

}

main {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

max-width: 300px;

width: 100%;

margin: auto;

padding: 25px;

box-shadow: inset 0 4px 5px #100;

background: rgba(255, 255, 255, 0.9);

}

h1,

p,

div,

input,

output {

box-sizing: border-box;

display: block;

margin: 0 auto;

width: 100%;

margin-top: 20px;

text-align: center;

}

div {

padding: 20px;

box-shadow: 0 0 5px #333;

font-size: 1.1rem;

font-weight: bolder;

background: white;

-webkit-transition: background 300ms ease, box-shadow 300ms ease;

transition: background 300ms ease, box-shadow 300ms ease;

}

div:hover {

background: #d8fad1;

box-shadow: 0 0 2px #919966;

}

div input {

cursor: pointer;

}

div output:after {

content: " chars max";

}

li {

font-family: monospace;

font-size: 1.1rem;

-webkit-transition: color 300ms ease-in;

transition: color 300ms ease-in;

}

li.is-changed {

color: red;

}