Question

我只是想知道在更改父级宽度时如何防止文本适应。如果您运行下面的代码并将鼠标悬停在div上，您可以看到文本＆＃34;如何适应＆＃34;在父母改变时的宽度。这是我想要避免的。我期望发生的是文本保留其初始属性（如果最终某些文本消失或变得不可读，我不在乎，因为当用户向左滑动时触发了＃34;效果＆＃34;文字消失在左边）。谢谢您的帮助！

＆＃13;

use App\Services\KDataService;

class DamagePointController extends Controller
{
    /** @var  KDataService $kDataService */
    private $kDataService;

    /**
     * Instantiate a new controller instance.
     *
     * @param KDataService $kDataService
     */
    public function __construct(KDataService $kDataService)
    {
        $this->kDataService = $kDataService;
    }  

    ...

}

＆＃13;

DECLARE @mytable TABLE
(paycode int,category nvarchar(50))

INSERT INTO @mytable
VALUES

(12345,'manager'),
(23456,'manager'),
(23654,'manager'),
(78965,'AM'),
(56987,'AM'),
(58966,'AM')

DECLARE @mytable2 TABLE
(paycode int,leavetype nvarchar(50),DATEstamp date)

INSERT INTO @mytable2
VALUES

(12345 , 'sl','01-01-2017'),
(12345 , 'sl','02-01-2017'),
(12345 , 'sl','03-01-2017'),
(12345 , 'sl','04-01-2017'),
(23456 , 'EL','01-01-2017'),
(23456 , 'EL','01-01-2017'),
(23456 , 'EL','01-01-2017'),
(23456 , 'EL','01-01-2017')

Select a.Paycode,Category,count(b.leavetype) as Total from @mytable a
left join @mytable2 b on a.paycode = b.paycode
group by a.paycode,a.category

＆＃13;

Answer 1

您可以使用absolute定位

在父级内部创建新div

.hello {
  background: red;
  border-radius: 20px;
  transition: 2s;
  width: 100%;
  height: 200px;
}

.hello:hover {
  width: 20%;
}

.innerText {
  position: absolute;
}

<div class="hello">
  <div class="innerText">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
  nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
  </div>
  
</div>

Answer 2

driver.find_element_by_link_text("Reveal").click()

.hello {
  background: red;
  border-radius: 20px;
  transition: 2s;
  width: 100%;
  height: 200px;
}

.hello:hover {
  width: 20%;
}
p{
  position:absolute;
}

Answer 3

希望这会对你有所帮助。

.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
overflow: hidden;
}

.hello:hover {
width: 20%;
white-space: nowrap;
text-overflow: ellipsis;
}

<div class="hello">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
  nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>

Answer 4

我会设置一个静态宽度，以便我可以阻止.static容器缩小..但它不是动态的，就像100％这样的解决方法可以与media queries一起使用，为了使其响应......

＆＃13;

.hello {
  background: red;
  border-radius: 20px;
  transition: 2s;
  width: 400px;
  height: 200px;
  overflow:hidden;
}

.hello:hover {
  width: 20%;
}
.static-container{
 width:400px;
 
}

＆＃13;

<div class="hello">
  <div class="static-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
  nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
  </div>
</div>

＆＃13;

如何防止文字适应父母的宽度？

4 个答案: