css文字过长显示的几种方案

html-css018

css文字过长显示的几种方案,第1张

1、默认情况,它是自动换行的;

2、设置文字不换行white-space:nowrap,强行撑开;

3、如果不希望容器被撑开,那就给文字加省略号:

<style type="text/css">

.divbox{ width:150px white-space:nowrap overflow:hidden text-overflow:ellipsis}

</style>

</head>

<body>

<div class="divbox">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

</body>

<!DOCTYPE HTML>                                                                 

<html>                                                                          

<meta charset="UTF-8" />                                                

<head>                                                                  

<title></title>                                 

</head>                                                                 

        <script src="

        <style type="text/css">                                                 

</style>                                                                

<body>                                                                  

<input type="text" name="" id="mytext" value="" placeholder="宽度为150px" style="width: 150px"/>   

                <button id="confirm">点击改变宽度为300px</button>               

</body>                                                                 

<script type="text/javascript">                                         

$(function(){                                                   

$('#confirm').click(function(){                         

$('#mytext').css('width','300px')              

})                                                     

})                                                              

</script>                                                               

</html>