CSS禁止文本自動換行代碼

來源:互聯網
上載者:User

在這行文字的td或div屬性中,加入

代碼如下:

style="word-break : break-all;"

例子

 代碼如下 複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 禁止自動換行</title>
<style type="text/css">
p {white-space:nowrap}
</style>
</head>
 
<body>
<p>這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,這是禁止了自動換行的文本測試,<p>
</body>
</html>

效果如下午

 

下面這個例子可以實現文本只有在遇到空格或者是分行符號的時候才能換行,比如:

 代碼如下 複製代碼

<style type="text/css">
div{width:300px;border:1px solid red;margin:10px;overflow:hidden;}
.nowrap{white-space:nowrap;}
</style>
<div class="nowrap">這是一段很長的文字,中間沒有空格,也沒有換行,它不會自動換行直到被截取掉</div>
<div>這是一段很長的文字,中間沒有空格,也沒有換行,但它會自動換行</div>

上面兩個div裡超寬的文字,第一個裡面的被禁止換行,然後超寬的被截取了;第二個不做設定,於是自動換行了

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.