JSFiddle - React, Tailwind, and code Playground

by timhuang

HTML

中文:<br />
<div class="style1">這是一個文字的測試, 如何讓他有不同的效果</div>
<div class="style2">這是一個文字的測試, 如何讓他有不同的效果</div>
<br />
英文:<br />
<div class="style1">
Obama Mideast Trip: President Visits Ramallah For Talks With Palestinians (VIDEO) </div>
<div class="style2">
Obama Mideast Trip: President Visits Ramallah For Talks With Palestinians (VIDEO) </div>

<input type="range" id="w" value="240" min="100" max="600" onChange="chkw()">

CSS

.style1{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: #eeffee;
    width: 240px; 
    height: 30px;
}

.style2{    
    overflow: hidden;
    white-space: nowrap;
    background: #ffeeff;
    width: 240px; 
    height: 30px;
}

JavaScript

function chkw(){
    alert(document.getElementById("w").value);
}