html - 阻止 div 调整大小超过其父级

Question

.date td div{
width: 100%;
height: 100%;
box-sizing: border-box;
white-space: nowrap;
word-wrap: ellipsis;
overflow:auto;

代码笔:http://codepen.io/Intelli/pen/qRYyxa

我已经尝试了宽度、高度、框大小、空白和自动换行的所有变体，但似乎没有任何效果。我需要做的是，如果文本水平方向太长，则添加一个分隔符，如果文本垂直方向太长，则添加一个滚动条。

Answer 1

使用 table-layout: fixed; 来防止表格元素增长超过定义的尺寸，并从嵌套的 中移除 white-space: nowrap; div 这样如果文本太宽就会换行。 http://codepen.io/mcoker/pen/WRWLxV

var Calendar = function(){
    this.day;
    this.month;
    this.date;
    this.year;
    this.events = [];
}
var Event = function(){
    this.title;
    this.location;
    this.id;
    this.start_time;
    this.end_time;
    this.start_month;
    this.start_day;
    this.start_date;
    this.start_year;
    this.end_month;
    this.end_day;
    this.end_date;
    this.end_year;
    this.email;
    this.phone;
    this.description;
};

var calendarMonth = [];
var days = ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var startDay;
var startMonth;
var startDate;
var startYear;


/**Create a calendar*/
function getCalendar(cal) {
    $(".month h2").text(months[cal.month]);
    $(".month h3").text(cal.year);
    
    $(".calendar tr").eq(2).find("td").eq(2).find("div").html("This is a very long test string to see if the div resizes past the td width </br> I also dont want to use overflow:hidden because I want a (VERTICAL ONLY)scroll bar if the height of the text is too long </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll");
  
    var daysInMonth = getDaysInMonth(months[cal.month], cal.year);

    startDay = cal.day;
    startDate = cal.date;
    startMonth = cal.month;
    startYear = cal.year;
    /**row 2 because that is the one with the dates*/
    var row = 2;
    if (cal.day != 0){
        for (var j = cal.day - 1; j >= 0; j--) {
            $(".calendar tr").eq(row).find("td").eq(j).find("div").css("background-color", "#b1c9ce");
        }
    }
    /**fill the calendar appropriately*/
    while (cal.date <= daysInMonth) {
        if (cal.day == days.length) {
            row++;
            cal.day = 0;
            $(".calendar").append('<tr class="date"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>');
        }
        $(".calendar tr").eq(row).find("td").eq(cal.day).find("div").text(cal.date);
        var temp = new Calendar();
        temp.day = cal.day;
        temp.month = cal.month;
        temp.date = cal.date;
        temp.year = cal.year;
        temp.events.push(new Event());
        calendarMonth.push(temp);
        cal.day++;
        cal.date++;
    }
    lastDay = cal.day;
    cal.date = 1;
    var j = cal.day;
    if (cal.day <= 6) {
        for (j = cal.day; j < days.length; j++) {
            $(".calendar tr").eq(row).find("td").eq(j).find("div").css("background-color", "#b1c9ce");
        }
    }
    while (cal.day < days.length) {
        $(".calendar tr").eq(row).find("td").eq(cal.day).find("div").text(cal.date);
        cal.day++;
        cal.date++;
    }
 }

function getDaysInMonth(startMonth, startYear) {
    var daysInMonth;
    /**Get the number of days in the month given*/
    if ((startMonth == "January") || (startMonth == "March") || (startMonth == "May") || (startMonth == "July") || (startMonth == "August") || (startMonth == "October") || (startMonth == "December")) {
        daysInMonth = 31;
    } else if ((startMonth == "April") || (startMonth == "June") || (startMonth == "September") || (startMonth == "November")) {
        daysInMonth = 30;
    } else if (startMonth == "February") {
        if (startYear % 4 == 0) {
            daysInMonth = 29;
        } else {
            daysInMonth = 28;
        }
    }
    return daysInMonth;
}


$(function() {
   var calendar = new Calendar();
    var d = new Date();
    var firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
    calendar.day = firstDay.getDay();
    calendar.month = firstDay.getMonth();
    calendar.year = firstDay.getFullYear();
    calendar.date = firstDay.getDate();
    getCalendar(calendar);
    $(".Prev").click(function() {
        calendarMonth = [];
        var temp = new Calendar();

        if(startMonth == 0){
            startMonth = 11;
            startYear--;
        }
        else startMonth--;
        var daysInMonth = getDaysInMonth(months[startMonth], startYear);
        var index = startDay - (daysInMonth % 7);
        if(index < 0) index += 7;
        startDay = index;

        temp.day = startDay;
        temp.date = startDate;
        temp.month = startMonth;
        temp.year = startYear;
        $(".date").remove();
        $(".calendar").append('<tr class="date"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>');
        getCalendar(temp);
    });

    $(".Next").click(function() {
        calendarMonth = [];
        var temp = new Calendar();
        var daysInMonth = getDaysInMonth(months[startMonth], startYear);
        if (startMonth == 11) {
            startYear++;
            startMonth = 0;
        } else {
            startMonth++;
        }

        var index = startDay + (daysInMonth % 7);
        if(index > 6) index = 7 - index;
        if(index < 0) index *= -1;
        startDay = index;
        temp.day = startDay;
        temp.date = startDate;
        temp.month = startMonth;
        temp.year = startYear;
        $(".date").remove();
        $(".calendar").append('<tr class="date"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>');
        getCalendar(temp);
    });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px solid darkgray;
  color: #d9d9d9;
  /**Month/Year text color*/
  table-layout: fixed;
}

td,
th {
  text-align: left;
  max-width: 14.28%;
  border: 2.5px solid darkgray;
  background-color: #DFE9EB;
  /**cell background-color*/
}

td {
  color: black;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.calendar {
  margin-right: auto;
  margin-left: auto;
  /*width: 75%;*/
  height: 100%;
}

.month {
  height: 5%;
  background-color: #2c7b87;
  /**Month/Year background color*/
  border: none;
  border-bottom: #c20a38 solid 1.5vh;
}

.month h2 {
  height: 30%;
  color: #d9d9d9;
  text-align: center;
}

.month h3 {
  height: 30%;
  color: #d9d9d9;
  text-align: center;
}

.date td {
  text-align: left;
  vertical-align: top;
  font-size: 1.5vh;
  height: 10vh;
}

.date td div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  word-wrap: ellipsis;
  overflow: auto;
}

.day th {
  color: #595959;
  colspan="1";
  width: 30vh;
  text-align: center;
}

.Prev,
.Next {
  width: 30%;
  height: 30%;
  font-size: 20px;
  display: block;
  margin: auto;
}

<table class="calendar">
    <tr>
        <td class="month"><button class="Prev"><</button></td>
        <td class="month"></td>
        <td class="month"></td>
        <td class="month"><h2>Month<h3>Year</h3></h2></td>
        <td class="month"></td>
        <td class="month"></td>
        <td class="month"><button class="Next">></button></td>
    </tr>
    <tr class="day">
        <th>
            <h3>Sunday</h3></th>
        <th>
            <h3>Monday</h3></th>
        <th>
            <h3>Tuesday</h3></th>
        <th>
            <h3>Wednesday</h3></th>
        <th>
            <h3>Thursday</h3></th>
        <th>
            <h3>Friday</h3></th>
        <th>
            <h3>Saturday</h3></th>
    </tr>
    <tr class="date">
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>