文字不适合边框 - CSS

时间：2015-07-03 09:26:15

标签： css

这是我的工作示例link。问题是，如果文本很长，它会走出边界，我想以某种方式阻止这种情况。有什么建议？

＆＃13;
＆＃13; 
.order-page-left {
  width: 275px;
  background: white;
}
.orders-list .item {
  display: block;
  border-bottom: 1px solid #e0e0e0;
  color: #181818;
  outline: 0;
  position: relative;
}
.orders-list .item .inner {
  padding: 7px 0 10px;
}
.orders-list .item .inner:before {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
}
.orders-list .item .detail {
  float: left;
  padding: 0 0 0 15px;
  width: 50px;
}
.orders-list .item .detail .smaller {
  font-size: 12px;
  color: #808080;
}
.orders-list .item .name {
  margin-left: 65px;
}
.orders-list .item .name .info {
  font-size: 12px;
  color: #808080;
}
＆＃13; 
<div class="order-page-left">
  <div class="orders-list">
    <a id="documentLink0" href="/service/sales/documents/order/quickView.do?envId=406519&amp;isDraft=false&amp;isNewDoc=true&amp;docStatus=" class="item highligh">


      <!-- onClick="getDocumentDetails(this, event);" -->
      <div class="inner cfx">
        <div class="detail">

          <b>
							
                               <span class="showDate">
                                    <span class="date" style="display: none;">03.07
                                    </span>
                                    <span class="exp_date">
                                    </span>
                                    <span class="docDate" style="display: inline;">11.05
                                    </span>
                               </span>
							
								</b>

          <div class="smaller">
            <span class="showDate">
                                    <span class="date" style="display: none;">11:25
                                    </span>
            <span class="exp_date">
                                    </span>
            <span class="docDate" style="display: inline;">09:07
                                    </span>
            </span>
          </div>
        </div>
        <div class="name">
          <b>AUTO EDIBUYER1</b>



          <div class="info">
            142.81 JMETER_20150703112433000000120:1:L
          </div>
        </div>
      </div>
    </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

尝试使用overflow:hidden;来防止文本溢出元素

＆＃13;
＆＃13; 
.order-page-left {
	width: 275px;
	background: white;
}
.orders-list .item {
	display: block;
	border-bottom: 1px solid #e0e0e0;
	color: #181818;
	outline: 0;
	position: relative;
    overflow:hidden;
}

.orders-list .item .inner {
	padding: 7px 0 10px;
}

.orders-list .item .inner:before {
	content: "";
	height: 100%;
	width: 30px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white
		100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,
		255, 255, 0)), color-stop(100%, white));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
		white 100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white
		100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white
		100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white
		100%);
}

.orders-list .item .detail {
	float: left;
	padding: 0 0 0 15px;
	width: 50px;
}

.orders-list .item .detail .smaller {
	font-size: 12px;
	color: #808080;
}

.orders-list .item .name {
	margin-left: 65px;
}


.orders-list .item .name .info {
	font-size: 12px;
	color: #808080;
}
＆＃13; 
<div class="order-page-left">
    <div class="orders-list">
        <a id="documentLink0" href="/service/sales/documents/order/quickView.do?envId=406519&amp;isDraft=false&amp;isNewDoc=true&amp;docStatus=" class="item highligh">
					
				
				    <!-- onClick="getDocumentDetails(this, event);" -->
					<div class="inner cfx">
						<div class="detail">
							
								<b>
							
                               <span class="showDate">
                                    <span class="date" style="display: none;">03.07
                                    </span>
                                    <span class="exp_date">
                                    </span>
                                    <span class="docDate" style="display: inline;">11.05
                                    </span>
                               </span>
							
								</b>
							
							<div class="smaller">
                                <span class="showDate">
                                    <span class="date" style="display: none;">11:25
                                    </span>
                                    <span class="exp_date">
                                    </span>
                                    <span class="docDate" style="display: inline;">09:07
                                    </span>
                                </span>
                            </div>
						</div>
						<div class="name">
							<b>AUTO EDIBUYER1</b>
							
							
							
							<div class="info">
								142.81 JMETER_2015070311243300dddddddddddd0000120:1:L
							</div>
						</div>
					</div>
				</a>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在保留容器上使用word-wrap: break-word;。查看updated fiddle

答案 2 :(得分：0)

您可以添加word-wrap: break-word以将扩展文本转移到新行。

.order-page-left {
  width: 275px;
  background: white;
}
.orders-list .item {
  display: block;
  border-bottom: 1px solid #e0e0e0;
  color: #181818;
  outline: 0;
  position: relative;
}
.orders-list .item .inner {
  padding: 7px 0 10px;
}
.orders-list .item .inner:before {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
}
.orders-list .item .detail {
  float: left;
  padding: 0 0 0 15px;
  width: 50px;
}
.orders-list .item .detail .smaller {
  font-size: 12px;
  color: #808080;
}
.orders-list .item .name {
  margin-left: 65px;
}
.orders-list .item .name .info {
  font-size: 12px;
  color: #808080;
  word-wrap: break-word;
}
<div class="order-page-left">
  <div class="orders-list">
    <a id="documentLink0" href="/service/sales/documents/order/quickView.do?envId=406519&amp;isDraft=false&amp;isNewDoc=true&amp;docStatus=" class="item highligh">


      <!-- onClick="getDocumentDetails(this, event);" -->
      <div class="inner cfx">
        <div class="detail">

          <b>
							
                               <span class="showDate">
                                    <span class="date" style="display: none;">03.07
                                    </span>
                                    <span class="exp_date">
                                    </span>
                                    <span class="docDate" style="display: inline;">11.05
                                    </span>
                               </span>
							
								</b>

          <div class="smaller">
            <span class="showDate">
                                    <span class="date" style="display: none;">11:25
                                    </span>
            <span class="exp_date">
                                    </span>
            <span class="docDate" style="display: inline;">09:07
                                    </span>
            </span>
          </div>
        </div>
        <div class="name">
          <b>AUTO EDIBUYER1</b>



          <div class="info">
            142.81 JMETER_20150703112433000000120:1:LExtended
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

答案 3 :(得分：0)

请尝试为display:table;

添加.order-page-left 
.order-page-left {
  display: table;
  width: 275px;
  background: white;
}
相关问题
最新问题