div里面的字超出div怎么如何处理

[已解决问题] 解决于 2016-12-10 16:08

<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
        $(".flip2").click(function() {
            $(".panel2").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
div.panel, div.flip, div.panel2, div.flip2 {
    margin: 0px;
    padding: 5px;
    text-align: center;
    background: #e5eecc;
    border: solid 1px #c3c3c3;
}
 
div.panel {
    display: none;
}
 
div.panel2 {
    display: none;
}
 
ul li {
    list-style-type: none;
}
</style>
<body>
    <ul>
        <li>
            <div
                style="width: 10%; height: 20px; float: left; text-align: right; overflow: hidden;">例子1</div>
            <div class="flip" style="width: 88%; height: 20px; float: right;">请点击这里</div>
            <div class="panel" style="width: 88%; float: right;">
                <p>W3School - 领先的 Web 技术教程站点</p>
                <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
            </div>
        </li>
        <li>
            <div
                style="width: 10%; float: left; text-align: right; overflow: hidden;">例子2</div>
            <div class="flip2" style="width: 88%; float: right;">请点击这里</div>
            <div class="panel2" style="width: 88%; float: right;">
                <p>W3School - 领先的 Web 技术教程站点</p>
                <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
            </div>
        </li>
    </ul>
</body>

我想点击然后下滑，这个功能实现了。一开始点击“请点击”的这个div会变长，我下写了高度，div固定了但是里面的字跑到外面去了。列子1和例子2这两个div也是，请问该怎么解决

html css

伊夏丶 | 初学一级 | 园豆：9
提问于：2016-01-21 10:53

< >

最佳答案

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
        $(".flip2").click(function() {
            $(".panel2").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
div.panel, div.flip, div.panel2, div.flip2 {
    margin: 0px;
    padding: 5px;
    text-align: left;
    background: #e5eecc;
    border: solid 1px #c3c3c3;
    overflow: hidden;
    word-wrap: break-word;
}

div.panel {
    display: none;
}

div.panel2 {
    display: none;
}

ul li {
    list-style-type: none;
    clear: both;
}
</style>
<style type="text/css">
span {
    height: 25px;
    width: 25px;
    display: block;
    position: relative;
}

.demoSpan1 {
    height: 20px;
    width: 20px;
    border: 3px #333 solid;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.demoSpan1:before {
    content: '';
    height: 15px;
    width: 15px;
    background: #333;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
    top: 3px;
    left: 3px;
}
</style>

</head>

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
       $(".flip").click(function() {
           $(".panel").slideToggle("slow");
       });
       $(".flip2").click(function() {
           $(".panel2").slideToggle("slow");
       });
   });
</script>
<style type="text/css">
div.panel, div.flip, div.panel2, div.flip2 {
   margin: 0px;
   padding: 5px;
   text-align: left;
   background: #e5eecc;
   border: solid 1px #c3c3c3;
   overflow: hidden;
   word-wrap: break-word;
}

div.panel {
   display: none;
}

div.panel2 {
   display: none;
}

ul li {
   list-style-type: none;
   clear: both;
}
</style>
<style type="text/css">
span {
   height: 25px;
   width: 25px;
   display: block;
   position: relative;
}

.demoSpan1 {
   height: 20px;
   width: 20px;
   border: 3px #333 solid;
   border-radius: 100%;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
}

.demoSpan1:before {
   content: '';
   height: 15px;
   width: 15px;
   background: #333;
   border-radius: 100%;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   position: absolute;
   top: 3px;
   left: 3px;
}
</style>

</head>

<body>
   <ul>
       <li>
           <div
               style="width: 10%; height: 20px; float: left; text-align: right; white-space: nowrap; overflow-x: auto">系统派单</div>

           <div class="flip"
               style="width: 88%; height: 20px; float: right; white-space: nowrap; overflow-x: auto">系统派单</div>
           <div class="panel"
               style="width: 88%; float: right; white-space: nowrap; overflow-x: auto">
               <p>2016年1月21日 11:54:13 NOC政企派单，系统受理!</p>

           </div>
       </li>
       <li>
           <div
               style="width: 10%; float: left; text-align: right; overflow: hidden;">本地网现场处理</div>
           <div class="flip2" style="width: 88%; float: right;">本地网现场处理</div>
           <div class="panel2" style="width: 88%; float: right;">
               <p>2016年1月21日 11:54:59 </p>
               <p>2016年1月21日 11:55:34</p>
           </div>
       </li>
   </ul>
</body>
</html>

伊夏丶 | 初学一级 |园豆：9 | 2016-01-21 15:32

其他回答(2)

方向给你指出了，自己查找学习一下吧。

[0] | 园豆：1257 (小虾三级) | 2016-01-21 10:56

第二个我用过了没用我去看看第一个

支持(0) 反对(0) 伊夏丶 | 园豆：9 (初学一级) | 2016-01-21 11:00

第一个也不行

支持(0) 反对(0) 伊夏丶 | 园豆：9 (初学一级) | 2016-01-21 11:03

@伊夏丶: 把你整个页面代码贴出来，我想看下效果，还需要自己补充代码。+_+

支持(0) 反对(0) [0] | 园豆：1257 (小虾三级) | 2016-01-21 11:23

@[0]: 我不是贴出来了吗

支持(0) 反对(0) 伊夏丶 | 园豆：9 (初学一级) | 2016-01-21 14:06

@伊夏丶: 我还需要自己写头，然后再找个jQuery库。.....

支持(0) 反对(0) [0] | 园豆：1257 (小虾三级) | 2016-01-21 14:11

@[0]:表头在下面

支持(0) 反对(0) 伊夏丶 | 园豆：9 (初学一级) | 2016-01-21 15:32

这能叫代码？

博雅源 | 园豆：178 (初学一级) | 2016-01-21 15:28

除了少了一个iquery库别的都一样

支持(0) 反对(0) 伊夏丶 | 园豆：9 (初学一级) | 2016-01-21 15:30

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

div里面的字超出div怎么如何处理

欢迎，请先登录或者注册。