文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >即使在定义宽度的情况下，分词也不能工作

问即使在定义宽度的情况下，分词也不能工作
EN

Stack Overflow用户
提问于 2018-06-28 10:28:40
回答 1查看 154关注 0票数 0

我正在做一个水平滑块。当我悬停时，会出现一个带有不透明度的白色背景的文本。

问题是，内部的文本太大，即使

标签比容器短。

例如，我知道要使用单词中断CSS属性，您需要定义width，我确实尝试过width : 200px，但它不起作用。

我也尝试过hyphens CSS属性、word-wrap CSS属性、word-break CSS属性、max-width CSS属性、overflow-wrap CSS属性，但是似乎没有什么效果。

你知道我做错了什么吗？

​

代码语言：javascript
复制
/*--------------------------------------------------------------
# Slider (Equipe)
--------------------------------------------------------------*/
.employes {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg); }
  .employes > .row {
    overflow-x: auto;
    white-space: nowrap; }
    .employes > .row > .employes_container {
      display: inline-block;
      float: none;
      -webkit-transform: rotateX(180deg);
              transform: rotateX(180deg); }
      .employes > .row > .employes_container .img-content {
        -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
        tranform: skew(-20deg); }
        .employes > .row > .employes_container .img-content:hover {
          cursor: pointer; }
          .employes > .row > .employes_container .img-content:hover .content {
            background-color: rgba(255, 255, 255, 0.4);
            opacity: 1; }
        .employes > .row > .employes_container .img-content .content {
          opacity: 0;
          -webkit-transition: all .5 ease-in-out;
          transition: all .5 ease-in-out;
          font-family: 'Lato', sans-serif; }
          .employes > .row > .employes_container .img-content .content .description {
            -webkit-transform: skew(20deg);
            -moz-transform: skew(20deg);
            -o-transform: skew(20deg);
            tranform: skew(20deg); }
    .employes > .row::-webkit-scrollbar {
      width: 12px; }
    .employes > .row::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px; }
    .employes > .row::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(255, 0, 0, 0.8);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }
    .employes > .row::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(255, 0, 0, 0.4); }
    .employes > .row::-webkit-scrollbar-button {
      width: 350px; }
  .employes .caption-link {
    position: absolute;
    bottom: 0;
    left: calc(50% - 100px);
    text-align: center;
    width: 200px;
    font-family: 'Lato', sans-serif; }
    .employes .caption-link > div {
      padding: 10px 25px;
      background-color: #1C3B65; }
      .employes .caption-link > div p {
        margin-bottom: 0;
        text-transform: uppercase;
        color: #FFF; }
代码语言：javascript
复制
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid employes">
		  <div class="row text-center flex-nowrap">
		    						<div class="col-md-2 col-sm-4 col-xs-8 employes_container mx-5 p-0">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description" style="
">
										<p>Avocat au barreau de Paris depuis 1993</p>
									</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    							<div class="col-md-2 col-sm-4 col-xs-8 p-0 mx-5 employes_container">
							<!-- <div class="img-content py-5" style="background:url('') no-repeat center center; background-size: cover;"> -->
							<div class="img-content" style="background:url('https://picsum.photos/200/300?image=0') no-repeat center center; background-size: cover;">
								<div class="content px-3 py-5">
									<div class="description">
																			</div>
								</div>
							</div>
						</div>
			    			  </div>
		</div>

​

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-28 13:11:26

变化

white-space: nowrap;

至

white-space: normal; in .employes > .row.

或者，完全移除它。

有关更多信息，请访问MDN -空格- CSS。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51080574

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档