p {
white-space: nowrap;
overflow: hidden;
width: 250px;
border: 1px solid #000000;
}
.ex1 {text-overflow: clip;}
.ex2 {text-overflow: ellipsis;}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h1>text-overflow</h1>
<p class="ex1"><b>clip</b> This is some long text that will not fit in the box</p>
<p class="ex2"><b>ellipsis</b> This is some long text that will not fit in the box</p>
</body>
</html>