CSS Property Value How to - display: inline-block;

Question

We would like to know how to display: inline-block;.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.trim-text {<!--from  ww  w  . ja  v  a 2  s .  c o m-->
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 {
  max-width: 150px;
  outline: 1px dashed #dadada;
}
</style>
</head>
<body>
  <h1 class="trim-text">Bite <a href="">Me ! this is a test</a></h1>
</body>
</html>

The code above is rendered as follows: