Vue

by Max Sinev

HTML

<div id="app">
  <div style="width: 300px; background: #ccc; height: 300px; padding: 10px;">
    <truncated-text text="Validate user permissions to have required route permissions" />
  </div>
</div>


<script type="text/x-template" id="tt">
  <div class="tt-main">
    <div class="tt-truncated">{{ text }}</div>
    <div class="tt-all">{{ text }}</div>
  </div>
</script>

CSS

body {
  background: #f1f1f1;
  padding: 20px;
  font-family: Helvetica;
}

.tt-main {
  width: 100%;
  position: relative;
}

.tt-truncated {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tt-all {
  display: none;
  position: absolute;
  white-space: nowrap;
  
  top: 0;
  left: 0;
}

.tt-main:hover .tt-all {
  display: block;
}

.tt-main:hover .tt-truncated {
  color: transparent;
}

Vue

Vue.component('truncated-text', {
	template: '#tt',
  props: ['text'],
  
  data() {
  	return {}
  }
});

new Vue({
  el: "#app",
  data() {
  	return {}
  },
});